Изменение анкеров на кинетическом холсте до стрелок?

Question

Я играю с кинетикой и холстом на протяжении последних нескольких дней. У меня есть холст перетаскивания, который загружает изменяемое изображение. анкеры на перезначительных изображениях являются окружностями:

var anchor; 

    function addAnchor(group, x, y, name) { 
    var stage = group.getStage(); 
    var layer = group.getLayer(); 

    anchor = new Kinetic.Circle({ 
     x: x, 
     y: y, 
     stroke: "#666", 
     fill: "#ddd", 
     strokeWidth: 2, 
     radius: 8, 
     name: name, 
     draggable: true 
      });     


    anchor.on("dragmove", function() { 
     update(group, this); 
     layer.draw(); 
    }); 
    anchor.on("mousedown touchstart", function() { 
     group.setDraggable(false); 
     this.moveToTop(); 
    }); 
    anchor.on("dragend", function() { 
     group.setDraggable(true); 
     layer.draw(); 
    }); 
    // add hover styling 
    anchor.on("mouseover", function() { 
     var layer = this.getLayer(); 
     document.body.style.cursor = "pointer"; 
     this.setStrokeWidth(4); 
     layer.draw(); 
    }); 
    anchor.on("mouseout", function() { 
     var layer = this.getLayer(); 
     document.body.style.cursor = "default"; 
     this.setStrokeWidth(2); 
     layer.draw(); 
    }); 

    group.add(anchor); 


    } 

Я хотел бы, чтобы превратить их в стрелки, или нечто подобное, чтобы показать пользователь, что Infact изображения является изменяемым размером. У кого-нибудь есть способ сделать это или учебник, который может показать мне, как рисовать стрелки или заменять якоря изображением?

Спасибо за любую помощь ...

Answer 1

Я думаю, вы должны изменить новый Kinetic.Cirle и его свойства на что-то вроде этого:

var anchor = new Kinetic.RegularPolygon({ 
     x: x, 
     y: y, 
     sides: 3, 
     rotation: -190, 
     radius: 8, 
     stroke: "black", 
     strokeWidth: 2, 
     name: name, 
     draggable: true 
    }); 

Хотя это только начало, из-за того, что на каждом якоре имеется другое вращение, вам также придется добавить больше переменных в группу якорей, чтобы каждый треугольник находился в правильном направлении.

Я только что проверил это, но надеюсь, что это поможет в качестве отправной точки.

Не забывайте подробно проверять Docs.

EDIT: Также см. here.