Geek Answers Handbook

Repainting a mouseover shape with KineticJS

I just started using Kinetic.js and I am also very unfamiliar with Canvas, so naked with me if this question is trivial.

I have a canvas that will contain from medium to a large number of figures (50-500).

I was able to chart the form that I would like to use with these tools:

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);
}

I would like to change chartImage context strokeStyle to a different color on mouseOver. I understand that the canvas element does not track the “state” and, as such, does not know that it has a form.

I am interested in a few things:

  • Does this fact mean the Canvas fact for the Kinetic layer element?
  • It seems to me that I need to clear the context of the chart and redraw it with a different color - will this cause flickering when you hover over the mouse?
  • ? - , z-index - , -, ?
  • 3 , 500 1000?

.

+5

More articles:


All Articles