Question

Some part of my code here:

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

​The task is to drag polygon by one of the corners (in example by right-bottom). But actually result is not that I expected. What is wrong in my code? or what is correct way of moving elemten by one of the points?

Answer 1

Check out this post iOS6 pull/drag border on circle

The effects are similar, I think, to what you’re looking for. You could animate the drag on any of your corners by detecting the click/touch location.

Let me know if you need another example.