向控件添加自定义删除(后退、前移)按钮

2022-01-17 00:00:00 canvas javascript html html5-canvas fabricjs

我想知道是否有一种简单的方法可以添加删除、放在前面、放在后面将函数添加到现有的 fabric.js 对象控件中.

I would like to know if there is an easy way to add a delete, bring to front, bring to back function into the existing fabric.js object controls.

目前我只能点击删除对象、放在前面等按钮.

At the moment I can only click on buttons which would delete object, bring to front etc.

我正在努力寻找能够在对象上按 X(右上角)并删除该对象的解决方案.

我猜这与覆盖、包装或继承现有的控件对象有关.

I guess it will have to do with overwriting, wrapping or subclassing the existing control object.

也许我已经监督了一些事情并且有一个简单的解决方案?请不要使用 Div Wrapper.

Maybe I have overseen something and there is an easy solution? Please no Div Wrapper.

推荐答案

Fabric.js 不提供向对象添加控件的任何简单方法.如果您想创建自己的控件，则必须覆盖 Object 类，特别是:

Fabric.js does not offer any simple mean of adding controls to objects. If you want to create your own controls, you will have to overwrite the Object class, notably:

  • 覆盖 drawControls，绘制自定义按钮
  • 您需要存储按钮的坐标，以便检测用户何时单击它们.参考文献_setCornerCoords 和 _findTargetCorner
  • 在 __onMouseDown
    • 中的某处合并您的操作
  • override drawControls, to draw your custom button
  • you will need to store the button's coordinates, so that you can detect when the user clicks them. C.f. _setCornerCoords and _findTargetCorner
  • incorporate your action somewhere in __onMouseDown

您无需处理取消绘制"控件，因为取消选择对象时会重新渲染整个画布.

You don't need to take care of 'undrawing' the controls, as the whole canvas is re-rendered when an object is de-selected.

我希望这会有所帮助，祝你好运:)

I hope this helps, and good luck :)

相关文章