我有一块画布,可以容纳中等到大量的形状(50-500)。
我已经成功地使用这些工具绘制了我想要的形状的轮廓:
function DrawPolygon(diagramLayer, polygon) {
var diagramImage = new Kinetic.Shape(function () {
var context = this.getContext();
context.beginPath();
context.lineWidth = 1;
context.strokeStyle = "#ff0000";
var lastVertice = polygon.Vertices[polygon.Vertices.length - 1];
context.moveTo(lastVertice.X, lastVertice.Y);
for (var i = 0; i < polygon.Vertices.length; i++) {
var vertice = polygon.Vertices[i];
context.lineTo(vertice.X, vertice.Y);
}
context.stroke();
context.closePath();
});
diagramImage.on("mouseover", function () {
});
diagramLayer.add(diagramImage);
planViewStage.add(diagramLayer);
}
我想在 mouseOver 上将 diagramImage 的 context 的 strokeStyle 更改为不同的颜色。我知道画布元素不跟踪“状态”,因此不知道当前有一个形状。
我想知道几件事:
- 以上关于 Canvas 的事实是否适用于 Kinetic 的图层元素?
- 似乎我需要清除 diagramImage 的上下文并使用不同的颜色重绘——这会导致鼠标悬停时闪烁吗?
- 在我当前的形状“下方”绘制另一种颜色的形状是否有益?然后我可以隐藏顶部的形状 - 也许通过修改 z-index - 看似“改变”形状的颜色?
- 如果 3 为真,那么将 500 个元素加倍到 1000 个是否会有任何性能问题?