Перекраска фигуры при наведении курсора с помощью KineticJS - PullRequest
Новая
       26

Перекраска фигуры при наведении курсора с помощью KineticJS

5 голосов
/ 14 февраля 2012

У меня есть холст, который будет содержать от умеренного до большого количества фигур (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);
}

Я бы хотел поменять значение strokeStyle контекста chartImage другим цветом на mouseOver.Я понимаю, что элемент canvas не отслеживает состояние и поэтому не имеет представления о том, что в данный момент на нем есть форма.

Мне интересно несколько вещей:

  1. Имеет ли место приведенный выше факт о Canvas для элемента слоя Kinetic?
  2. Похоже, мне нужно очистить контекст figureImage и перерисовать, используя другой цвет - это вызовет мерцание при наведении курсора мыши?
  3. Будет ли вообще полезным рисовать другой цвет фигуры «под» моей текущей?Могу ли я затем скрыть фигуру сверху - возможно, изменив z-index - чтобы, казалось бы, «изменить» цвет фигур?
  4. Если 3 равно true, будут ли это проблемы с производительностью при удвоении 500элементы до 1000?

1 Ответ

8 голосов
/ 14 февраля 2012

Вот лаборатория, в которой показано, как можно изменить цвет фигуры с помощью наведения мыши:

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

...