как тянуть линию/многоугольник по одной из точек в kineticjs?

Некоторая часть моего кода здесь:

var stage = new Kinetic.Stage({
        container: "canvas",
        width: 300,
        height: 200
    });

    var layer = new Kinetic.Layer({
    });
    var line = new Kinetic.Polygon({
        id: 'wall',
        points: [50, 50, 100, 50, 100, 100, 50, 100],
        stroke: "black",
        strokeWidth: 4,
        draggable: true
});
    line.on('dragmove', function(mouseEvent) {
        line.getPoints()[2] = {x:mouseEvent.x, y:mouseEvent.y};
        layer.draw();
});

stage.add(layer);

layer.add(line);
layer.draw();

Задача состоит в том, чтобы перетащить полигон за один из углов (в примере за правый нижний). Но на самом деле результат не тот, что я ожидал. Что не так в моем коде? или как правильно перемещать элемент по одной из точек?


javascript canvas kineticjs
person rdo    schedule 21.11.2012    source источник
comment
Вы имеете в виду, что хотите перетаскивать только углы фигуры, но не стороны? Предполагается ли изменение вершин? Прямо сейчас вы устанавливаете нижний правый угол (line.getPoints()[2]) в mouseEvent, что, очевидно, вызовет деформацию и мало что еще.   -  person michael.orchard    schedule 21.11.2012
comment
Да, я хочу перетащить только один угол прямоугольника, а остальные углы должны быть статичными и оставаться на исходных местах.   -  person rdo    schedule 22.11.2012

Ответы (1)


arrow_upward
2
arrow_downward

Ознакомьтесь с этим сообщением iOS6 потяните/перетащите границу по кругу

Эффекты, я думаю, похожи на то, что вы ищете. Вы можете анимировать перетаскивание в любом из ваших углов, определяя местоположение щелчка/касания.

Дайте мне знать, если вам нужен еще один пример.

person JustJohn    schedule 03.12.2012