如何在Fabric JS中的画布的一个角添加删除图标功能?

阿姆鲁莎·古塔

通常在fabric js中,对象具有缩放和旋转属性,如何添加删除功能?

据伊扎里斯

我举了一个例子来帮助您解决问题,但是代码上的要点是:

1. which controls we want to see when we select an object
var HideControls = {
            'tl':true, //top left corner is visible
            'tr':false,
            'bl':false,
            'br':false,
            'ml':false,
            'mt':false,
            'mr':false,
            'mb':false,
            'mtr':false
        };


2. a circle object with **only top left corner visible**
 var circle = new fabric.Circle({
                  radius: 20, 
                  fill: 'red', 
                  left: 100, 
                  top: 100
                });
circle.setControlsVisibility(HideControls);
            canvas.add(circle);

3. on mouse:down event we check what we click
canvas.on("mouse:down",function(e){
      var target = canvas.findTarget(e.e);
    console.log('mouse:down');
     //delete object if user clicks on top left corner
    if (target && target.__corner === 'tl') {             
        if (canvas.getActiveObject()) {
            canvas.remove(canvas.getActiveObject());
        }
    }
});

jsfiddle示例:http : //jsfiddle.net/tornado1979/0fbefh52/6/

我创建了三个对象,单击左上角以删除该对象。祝你好运!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在下拉角材料上添加一个清晰的图标?

来自分类Dev

如何在Fabric js中的组中添加图像

来自分类Dev

在画布HTML5和Fabric js中的图像上添加删除图标

来自分类Dev

如何在Itext Fabric JS中删除默认文本

来自分类Dev

如何在Fabric js的组中添加图像

来自分类Dev

如何在画布上更改SVG颜色-Fabric.js

来自分类Dev

如何在fabric.js中使用画布保存图像

来自分类Dev

Fabric.js-如何在鼠标移动时检测画布?

来自分类Dev

单击按钮后如何在画布中再添加一个元素?

来自分类Dev

如何在Fabric.js中绘制弧

来自分类Dev

如何在Fabric.js中停止/取消requestAnimFrame()

来自分类Dev

如何在Fabric JS中围绕中心旋转动画

来自分类Dev

如何在Fabric JS中围绕中心旋转动画

来自分类Dev

我如何在Hyperledger Fabric中获得唯一的ID

来自分类Dev

如何在Fabric.js中动态缩放对象以达到画布大小

来自分类Dev

如何在Fabric JS中设置画布的重复背景图像?

来自分类Dev

如何在Angular 8中修改画布上fabric.js背景图像的图像选项

来自分类Dev

我如何在我的fabric.js画布中引入基于键的事件?

来自分类Dev

如何使用按钮从Fabric.js画布中删除图像

来自分类Dev

如何使用按钮从Fabric.js画布中删除图像

来自分类Dev

如何在Fabric.js上获取鼠标坐标?

来自分类Dev

如何在Fabric JS的角落启用非均匀缩放

来自分类Dev

如何在fabric.js中选择和拖动对象

来自分类Dev

如何在Fabric JS的角落启用非均匀缩放

来自分类Dev

如何在Fabric Js中使用Selenium IDE

来自分类Dev

如何在Fabric中动态编辑env.roledefs?

来自分类Dev

如何在Fabric.io中初始化Crashlytics?

来自分类Dev

如何在iOS应用中卸载Fabric工具包?

来自分类Dev

如何在Fabric中动态编辑env.roledefs?

Related 相关文章

  1. 1

    如何在下拉角材料上添加一个清晰的图标?

  2. 2

    如何在Fabric js中的组中添加图像

  3. 3

    在画布HTML5和Fabric js中的图像上添加删除图标

  4. 4

    如何在Itext Fabric JS中删除默认文本

  5. 5

    如何在Fabric js的组中添加图像

  6. 6

    如何在画布上更改SVG颜色-Fabric.js

  7. 7

    如何在fabric.js中使用画布保存图像

  8. 8

    Fabric.js-如何在鼠标移动时检测画布?

  9. 9

    单击按钮后如何在画布中再添加一个元素?

  10. 10

    如何在Fabric.js中绘制弧

  11. 11

    如何在Fabric.js中停止/取消requestAnimFrame()

  12. 12

    如何在Fabric JS中围绕中心旋转动画

  13. 13

    如何在Fabric JS中围绕中心旋转动画

  14. 14

    我如何在Hyperledger Fabric中获得唯一的ID

  15. 15

    如何在Fabric.js中动态缩放对象以达到画布大小

  16. 16

    如何在Fabric JS中设置画布的重复背景图像?

  17. 17

    如何在Angular 8中修改画布上fabric.js背景图像的图像选项

  18. 18

    我如何在我的fabric.js画布中引入基于键的事件?

  19. 19

    如何使用按钮从Fabric.js画布中删除图像

  20. 20

    如何使用按钮从Fabric.js画布中删除图像

  21. 21

    如何在Fabric.js上获取鼠标坐标?

  22. 22

    如何在Fabric JS的角落启用非均匀缩放

  23. 23

    如何在fabric.js中选择和拖动对象

  24. 24

    如何在Fabric JS的角落启用非均匀缩放

  25. 25

    如何在Fabric Js中使用Selenium IDE

  26. 26

    如何在Fabric中动态编辑env.roledefs?

  27. 27

    如何在Fabric.io中初始化Crashlytics?

  28. 28

    如何在iOS应用中卸载Fabric工具包?

  29. 29

    如何在Fabric中动态编辑env.roledefs?

热门标签

归档