我对使用HTML5 Canvas和KineticJS很陌生,所以如果这是我的一个明显错误,请原谅我。
我的问题是我正在使用由形状组成的组。 形状使用drawFunc来执行绘图魔术。 都是好东西。 但是 - 我注意到在我的 Shape 调用中进行的设置似乎覆盖了"全局"上下文设置。 我创建的一个小提琴最好地展示了这一点,该小提琴在标准的"KineticJS拖放组"演示中添加了一些十字(形状)。
// ----------------------------------------------------------[ my bit starts ]
var tmp_x = i * 30 + 100
var tmp_y = i * 30 + 40
var shape = new Kinetic.Shape({
drawFunc: function(context) {
context.moveTo(tmp_x-10, tmp_y);
context.lineTo(tmp_x + 10, tmp_y);
context.moveTo(tmp_x, tmp_y - 10);
context.lineTo(tmp_x, tmp_y + 10);
this.fill(context);
this.stroke(context);
} ,
fill: "#0FD2FF",
stroke: "orange"
});
group.add(shape);
// ----------------------------------------------------------[ my bit ends ]
var box = new Kinetic.Rect({
x: i * 30 + 210,
y: i * 18 + 40,
width: 100,
height: 50,
name: colors[i],
fill: colors[i],
stroke: 'black',
strokeWidth: 4
});
group.add(box);
您会注意到,在"形状"中所做的笔触和填充设置印在彩色框的设置上 - 除了最后一个十字(形状)之后创建的最后一个。
这感觉像是某种后期评估的事情,因为只有当组被渲染时,事情才会完成。
有人可以给我一个线索,说明我做错了什么吗?
上下文是全局的,因此当您对其应用设置时,它们将保留为每个使用该上下文进行绘制的形状。
您需要在drawFunc中调用context.beginPath()
和context.closePath()
,围绕其他调用context
,以指示这是一个新的且与其他形状分开的形状。
所以现在,你的形状代码是这样的:
var shape = new Kinetic.Shape({
drawFunc: function(context) {
context.beginPath();
context.moveTo(tmp_x-10, tmp_y);
context.lineTo(tmp_x + 10, tmp_y);
context.moveTo(tmp_x, tmp_y - 10);
context.lineTo(tmp_x, tmp_y + 10);
context.closePath();
this.fill(context);
this.stroke(context);
},
fill: "#0FD2FF",
stroke: "orange"
});
这将防止上下文设置泄漏到其他形状。