在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 的屏幕截图 /image/lEXBq.png
最佳答案
关于javascript - Fabric js自定义图标旋转点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21566732/