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

Adding Custom Delete (Back,toFront) Button to Controls(向控件添加自定义删除(后退、前移)按钮)

问题描述

我想知道是否有一种简单的方法可以添加删除、放在前面、放在后面将函数添加到现有的 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 :)

这篇关于向控件添加自定义删除(后退、前移)按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！