如何解决FabricJS 在画布元素之间交替?
假设我有两个画布元素:
<canvas id="c1" width="400" height="300"></canvas>
<canvas id="c2" width="400" height="300"></canvas>
<canvas id="c3" width="400" height="300"></canvas>
通过查看文档,它告诉我我可以使用它将画布转换为 FabricJS 画布。
var c = new fabric.Canvas('c1',{
preserveObjectStacking: true,isDrawingMode: false
});
现在,如果我想用这个新画布做点什么,例如添加一个圆圈,我可以使用这个功能:
function AddCircle() {
var object = new fabric.Circle({
radius: 15,fill: 'blue',left: 100,top: 100
});
c.add(object);
}
现在,这对 c1
来说一切都很好,但是 c2
和 c3
不会做任何事情,因为它永远不会被初始化。那么是否可以在 FabricJS 画布元素之间交替使用?
我希望功能类似于 activeCanvas.add(object)
而不仅仅是 c.add(object)
。
在你回复之前,请注意我很清楚我可以对 c2
元素使用相同的方法,但我想在画布元素之间交替,因为我有一些计划.
解决方法
我不完全确定您所说的在画布元素之间交替是什么意思,但这是我的建议。
首先初始化所有画布:
var options = { preserveObjectStacking: true,isDrawingMode: false };
var c1 = new fabric.Canvas('c1',options),c2 = new fabric.Canvas('c2',c3 = new fabric.Canvas('c3',options);
在执行 Fabric 操作时参考适当的画布:
c1.add(object1);
c2.add(object2);
c3.add(object3);
FabricJS 在处理多个画布时没有内置的 activeCanvas 变量,但您可以使用事件来实现。
//declare global activeCanvas variable and allCanvas array
var activeCanvas,allCanvas = [c1,c2,c3];
//create function for updating activeCanvas variable
function setActiveCanvas(canvas) {
activeCanvas = canvas;
}
//adds event to each canvas to update the activeCanvas variable when the mouse enters any canvas
allCanvas.forEach(function(item,index){
item.on('mouse:over',setActiveCanvas(this));
});
现在您的 activeCanvas 变量将始终引用您的鼠标进入的最后一个画布。显然,如果您想支持触摸设备,则使用 mouse:over
事件将不起作用,因此您可能需要选择最适合您的项目的 another event。
现在您可以修改 AddCircle()
函数以引用 activeCanvas。
function AddCircle() {
var object = new fabric.Circle({
radius: 15,fill: 'blue',left: 100,top: 100
});
activeCanvas.add(object);
}
,
Melciar 的回答是一个绝妙的解释,我建议您阅读它,但我想以他所说的一件事为基础。您可以像这样初始化它们:
var options = { preserveObjectStacking: true,c3];
现在您可以全部或单独修改它们。如果你想同时修改它们,你可以这样做:
allCanvas.forEach(function(item,index){
var myCircle = new fabric.Circle({
radius: 15,top: 100
});
item.add(myCircle);
});
当然,您仍然可以按照melchair的精彩解释单独修改它们:
c1.add(object1);
c2.add(object2);
c3.add(object3);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。