Добавить новую точку в многоугольник по клику в KineticJS

Question

У меня есть многоугольник (квадрат) на сцене. Когда пользователь нажимает на любой край многоугольника, в этой точке будет создана новая вершина, увеличивая число ребер на 1.

Проблема: Как вы можете обнаружить щелчок по краю / обводке многоугольника?

После определения щелчка, как добавить новую вершину / точку в полигон в том месте, где она была нажата? Я предполагаю, что если новая точка добавляется в конец многоугольника points В массиве многоугольник может перекрываться, поскольку он рисует многоугольник против часовой стрелки.

Попытка jsfiddle: http://jsfiddle.net/frpn7/

Answer 1

Переключитесь на "щелчок", чтобы зафиксировать щелчок на многоугольнике:

poly.on('click', function(e) {

К сожалению, это также вызовет событие click внутри полигона, поэтому вам нужно будет создать 2 полигона (1 для внутренней и один для границы), если вы хотите, чтобы только граница была кликабельной, в противном случае вы можете попробовать не заполнять полигон

Отредактируйте как это сделать:

Вы можете сделать это, комбинируя две фигуры вместе и объединяя их в одну группу. Первая фигура будет иметь рамку, а вторая - без рамки.

        var first_poly = new Kinetic.Polygon({
            points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 5
        });
        var second_poly = new Kinetic.Polygon({
            points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 0
        });

        first_poly.on("click",function(){
            alert("border clicked");
        })
        // add the shape to the layer
        layer.add(first_poly);
        layer.add(second_poly);
        stage.add(layer);

Вторая часть заимствована у: Kinetic JS - Обнаружение щелчка на границе формы

Третья часть перерисовки многоугольника будет следующей. Говоря абстрактно, вы всегда можете очистить эти полигоны и просто заново нарисовать весь полигон снова. Сначала определите новую позицию щелчка в массиве точек многоугольника. Вы можете приблизить его, зацикливаясь на каждой точке, чтобы определить 2 ближайшие точки и вставив их между ними.