Question

在面料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);
    });

这是画布http://i.imgur.com/watnbPL.png

的屏幕截图

Answer 1

您可以修改默认的结构功能以获得该功能。

This可能会对您有所帮助。 this 是我的git repo的链接，有一个使用fabric制作的画布应用程序。

织物js自定义图标旋转点

1 个答案: