Предыдущая форма исчезает после добавления новой - KineticJS - PullRequest
Новая
       14

Предыдущая форма исчезает после добавления новой - KineticJS

0 голосов
/ 10 марта 2012

У меня есть функция document.ready, в которой я создаю несколько слоев, включая мой linesLayer, например (и мой этап): 

var pointsLayer = new Kinetic.Layer();
var linesLayer = new Kinetic.Layer();
var stage = new Kinetic.Stage("container", 578, 325);

В моей функции document.ready есть функция щелчка длямой холст, здесь я создаю новый круг, например (который представляет точку / точку на экране), например: 

var circle = new Kinetic.Circle({
    name: "x"+x+"y"+y,
    x: x,
    y: y,
    radius: 5,
    fill: "red",
    stroke: "black",
    strokeWidth: 1
});

После этого я создаю свою линию: 

var line = new Kinetic.Shape({
    drawFunc: function(){
        var context = this.getContext();
        context.beginPath();
        context.lineWidth = 1;
        context.strokeStyle = "black";
        context.fillStyle = "red";
        context.moveTo(startPoint.x, startPoint.y);
        context.lineTo(endPoint.x, endPoint.y);
        context.closePath();
        context.fill();
        context.stroke();
    }
});

И затем я добавляю их в соответствующие слои: 

linesLayer.add(line);
pointsLayer.add(circle);

И добавляю их на сцену: 

stage.add(pointsLayer);
stage.add(linesLayer);

Что происходит, когда я рисую свои точки / круги, они всеоставайся на экране, как я хочу, чтобы они были.Поэтому, если я нажму 10 раз, у меня будет 10 точек.Теперь проблема в том, что это действительно рисует линию, но каждый раз она рисует только 1 линию, самую последнюю линию между двумя точками, вместо того, чтобы оставить все предыдущие линии на экране.Почему это происходит, так как я добавляю их в слой и ничего не делаю с предыдущими линиями в линейном слое?

Так что, по сути, он добавляет мои круги к точечному слою так, как я их хочу, иоставляет предыдущие добавленные элементы нетронутыми, но всякий раз, когда я добавляю линию в слой строк, все предыдущие элементы слоя строк исчезают?

Редактировать: Исправлено с помощью этого кода, хотя пока неизвестно, почему это работает. 

            // Create line
            var line = new Kinetic.Shape({
                drawFunc: function(){
                    var context = this.getContext();
                    context.beginPath();
                    context.moveTo(prevPoint.x, prevPoint.y);
                    context.lineTo(x, y);
                    context.closePath();
                    this.fillStroke();
                },
                stroke: "orange",
                name: "x"+x+"y"+y+"nr"+nr_coords,
                strokeWidth: 2
            });

1 Ответ

2 голосов
/ 14 марта 2012

Ну, во-первых, вы используете разные переменные между вашим первым постом и вторым постом. В своем первом посте вы используете объекты startPoint и endPoint. Во втором посте вы используете объект prevPoint. Я предполагаю, что проблема была связана с тем, что эти переменные были установлены (код не показан)

...