5

中程度から大量の形状 (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);
}

マウスオーバーで、diagramImage のコンテキストの strokeStyle を別の色に変更したいと思います。キャンバス要素は「状態」を追跡しないことを理解しています。そのため、現在形状があることを知りません。

私はいくつかのことを疑問に思っています：

  1. Canvas に関する上記の事実は、Kinetic のレイヤー要素にも当てはまりますか?
  2. ダイアグラム イメージのコンテキストをクリアし、別の色を使用して再描画する必要があるようです。これにより、マウスオーバー時にちらつきが発生しますか?
  3. 現在の形状の「下」に別の色の形状を描くことは、まったく有益でしょうか? 次に、おそらく z-index を変更して、形状の色を一見「変更」して、形状を非表示にすることはできますか?
  4. 3 が true の場合、500 要素を 1000 に倍増すると、パフォーマンスに問題が生じるでしょうか?
4

1 に答える 1

8

マウスオーバーで図形の色を変更する方法を示すラボは次のとおりです。

http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/

于 2012-02-14T01:12:43.683 に答える