javascript - Fabric js自定义图标旋转点

标签 javascript canvas

在fabric js中如何自定义旋转点?我有 3 个额外的控件,它们是删除、z 顺序、旋转。我想用旋转图标更改旋转点。

到目前为止,我关注演示 http://fabricjs.com/interaction-with-objects-outside-canvas/它适用于删除和 z 顺序控制,但对于旋转它保持在旋转点的顶部,因此很难旋转对象。这是关于我如何做到这一点的代码。

canvas.on("object:selected", function(obj){
        jQuery(".deleteBtn").remove(); jQuery(".zOrderBtn").remove(); jQuery('.rotateBtn').remove();
        var btnLeft = obj.target.oCoords.mt.x - 40;
        var btnTop = obj.target.oCoords.mt.y - 50;
        var orderLeft = obj.target.oCoords.mt.x + 10;
        var orderTop = obj.target.oCoords.mt.y - 50;
        var rotateLeft = obj.target.oCoords.mt.x - 10;
        var rotateTop = obj.target.oCoords.mt.y - 50;
        var deleteBtn = '<img src="assets/images/delete-trash.png" class="deleteBtn" title="Delete" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;" />';
        var zOrderBtn = '<img src="assets/images/zorder.png" class="zOrderBtn" title="Bring to top" style="position:absolute;top:'+orderTop+'px;left:'+orderLeft+'px;cursor:pointer;" />';
        var rotateBtn = '<img src="assets/images/rotate.png" class="rotateBtn" title="Rotate" style="position:absolute;top:'+rotateTop+'px;left:'+rotateLeft+'px;cursor:pointer;" />';
        jQuery("#canvas-wrap").append(deleteBtn);
        jQuery("#canvas-wrap").append(zOrderBtn);
        jQuery("#canvas-wrap").append(rotateBtn);
        currentDeleteBtn = jQuery('.deleteBtn').eq(0);
        currentOrderBtn = jQuery('.zOrderBtn').eq(0);
        currentRotateBtn = jQuery('.rotateBtn').eq(0);
    });

这是 Canvas 的屏幕截图http://i.imgur.com/watnbPL.png

最佳答案

您可以修改默认结构函数来获得它。

This可以帮助你。
this
是我的 git repo 的链接,有一个我使用织物制作的 Canvas 应用程序。

关于javascript - Fabric js自定义图标旋转点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21566732/

相关文章:

javascript - JSON 和 javascript 对象

javascript - jQuery在一个又一个 child 中淡入淡出

javascript - 在Javascript中使用CSS3进行FadeIn动画

javascript - 关于 javascript-canvas 对象的问题(保存、转换、恢复)

javascript - HTML Canvas,迟钝而笨重

javascript - JavaScript eslint错误-不要使函数处于循环状态

javascript - 基于js中种子字符串的相同uuid

javascript - 如何将OffscreenCanvas转换为DataURI

javascript - Canvas 中的最近邻插值(Internet Explorer 9)

javascript - 以编程方式在 <canvas> 的 fillStyle 中使用 RGBa 值?