FabricJS:对象控件在通用选择之前不起作用
FabricJS:对象控件在通用选择之前不起作用
提问于 2020-11-05 20:28:13
我正在使用Vue和FabricJS创建一个产品配置器。
我已经创建了一个画布，使用
this.canvas = new fabric.Canvas("canvas");<template>
<div id="wrapper">
<div id="left"></div>
<canvas id="canvas"/>
</div>
</template>
在我向画布添加一个对象(IText、Textbox、Image、使用new fabric.IText(...))并用鼠标选择它之后，我无法使用对象控件来调整对象的大小、缩放、倾斜或旋转对象。但是，我可以在画布上移动对象。在我添加另一个对象后，一次选中这两个对象，然后再次取消选择，控件突然都按预期工作了。我不能在JsFiddle上重现这个问题，所有的东西都在那里工作。
Controls not working until both objects are selected
我使用不同的浏览器解决了这个问题。
我是否遗漏了一些canvas属性，这些属性在添加后立即启用此功能？或者这是Fabric.js中的一个bug？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-03 00:56:49
一段时间后，我使用了一种变通方法:我在创建后立即向画布添加了一个空的辅助对象，然后在添加每个新对象后，我以编程方式选择和取消选择所有这些对象。在此之后，所有对象的行为都是正确的。我知道这是一个“黑客”，但它是有效的:)
this.canvas = new fabric.Canvas("canvas", {
...canvasProps
});
const helperObj = new fabric.Object({}); //abstract invisible object
helperObj.set("selectable", false); //so the user is not able to select and modify it manually
this.canvas.add(helperObj);
this.canvas.on("object:added", () => {
//workaround - selecting all objects to enable object controls
let objects = this.canvas.getObjects();
var selection = new fabric.ActiveSelection(objects, {
canvas: this.canvas,
});
this.canvas.setActiveObject(selection); //selecting all objects...
this.canvas.discardActiveObject(); //...and deselecting them
this.canvas.requestRenderAll();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64697215
复制相关文章
相似问题
腾讯云开发者
