Question

这可能更像是一般的javascript而不是fabric.js的问题。

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

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

有人能给我一个关于如何开始这个的正确方向吗？是否涉及到lib或框架？我是否在思考它？我来自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）从canvas获取对象。

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）构建此应用程序要容易得多。希望有所帮助。

我的代码real world working example

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

1 个答案: