为Fabric.js对象创建“控制面板”

Question

这可能是比fabric.js问题更通用的javascript。

我正在看Fabric.js “ kitchensink ”演示。 如果单击“对象”选项卡，然后在左侧绘图区域中选择一个项目，则控制面板将填充有所选对象的属性，并且存在（或似乎是）单向绑定：控制面板中的更改反映在所选对象中。

我需要实现这种控制面板，并且不确定从哪里开始。 我一直在查看该演示的页面源，但是它非常密集。

有人可以在正确的方向上为我提供些帮助吗？ 是否有库或框架？ 我在想什么吗？ 我来自Flex / Actionscript背景，在这里做这种事情非常容易，而且我仍然对Javascript | HTML | CSS组合的密度感到困惑。

Answer 1

我们在可定制的产品页面中使用类似的功能。 这与Kitchensink的示例有些不同。 在我们的系统中，您需要首先向画布添加一个文本对象。

主要工作流程如下：

• 为每个新的画布对象指定一个ID：

    addText() { const textSample = new fabric.IText('Örnek yazı', { left: canvas.width * fabric.util.getRandomInt(20, 30) / 100, top: canvas.width * fabric.util.getRandomInt(20, 30) / 100, fontFamily: 'Georgia, Times, "Times New Roman", serif', fontSize: 30, id: myId //This is my id }); window.canvas.add(textSample); } 

• 在画布上选择该项目后，获取其ID并激活右列的textarea。

    let activeTextObjectId window.canvas.on({ 'object:selected': () => { if (window.canvas.getActiveObject().type === 'i-text') { activeTextObjectId = getIdOfSelectedObject() activateTextaArea() // I think you can handle this } } }) getIdOfSelectedObject() { return window.canvas.getActiveObject().id } 

• 因此，您具有canvas对象的ID。 现在，您可以运行一个函数，以在textarea keyup事件触发时更新文本对象（updateTextObjectInCanvas）

   document.getElementById('myTextarea').onkeyup = function () { updateCanvasTextObject(this.value) } 

• 您需要一个函数，该函数通过其ID（getObjectFromCanvasById）从画布获取对象，并通过一个函数更新其文本（updateCanvasTextObject）。

   updateCanvasTextObject(value) { const canvasTextObject = this.getObjectFromCanvasById(activeTextObjectId) canvasTextObject.text = value window.canvas.renderAll() } //Instead of getting object from canvas, you can directly edit using getActiveObject() method of fabric.js getObjectFromCanvasById(id) { const canvasObject = window.canvas.getObjects().filter((item) => { return item.id === parseInt(id) }) return canvasObject[0] } 

抱歉，代码很杂乱并且可以优化，但是我认为它为工作流程提供了一个思路。 当然，在实际示例中，您将需要许多控件和验证。 同样，使用JS库和状态管理系统（例如Vue.js和Vuex）一起构建此应用程序也将更加容易。 希望能有所帮助。

这是我的代码的真实工作示例