Changing the anchors on a kineticJS canvas to arrows? - html

Question

I have been playing about with kineticjs and the canvas as of the last couple of days. I have a drag and drop canvas that loads a resizable image. the anchors on the resizable image are circles:
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);
}
I would like to turn them into arrows, or something similar to show users that infact the image is resizeable. Does anyone have a method of doing this or a tutorial that may show me how to either draw arrows or replace the anchors with an image?
Thanks for any help...

Answer 1

I think you'll need to change the new Kinetic.Cirle and it's properties to something like this:
var anchor = new Kinetic.RegularPolygon({
x: x,
y: y,
sides: 3,
rotation: -190,
radius: 8,
stroke: "black",
strokeWidth: 2,
name: name,
draggable: true
});
Although this is only the beginning, due to having a different rotation on each anchor, you will also have to add more variables to the group of anchors as to have each triangle face the correct direction.
I have only briefly tested this, but I hope it helps as a starting point.
Remember to double check the Docs.
EDIT: Also see here.