Develop Reference

Resize Konva Label on Zoom

I have a simple setup where use clicks location and creates a label with text.
What i would like to be able to do is resize on zoom, so that label is relative size always. Currently label is huge when i zoom in covering key areas.
code:
createTag() {
return new Konva.Tag({
// omitted for brevity
})
}
createLabel(x: number, y: number) {
return new Konva.Label({
x: x,
y: y,
opacity: 0.75
});
}
createText() {
return new Konva.Text({
// omitted for brevity
});
}
createMarker(point: any) {
var label = createLabel(point.x, point.y);
var tag = createTag();
var text = createText();
label.add(tag);
label.add(text);
this.layer.add(label);
this.stage.add(this.layer);
}
Mouse click event listener
this.stage.on('click', function (e) {
// omitted for brevity
var pointer = this.getRelativePointerPosition();
createMarker(pointer);
// omitted for brevity
}
this.stage.on('wheel', function (e) {
// zoom code
});
How can i resize the labels to be relative size of the canvas?

There are many possible solutions. If you are changing scale of the whole stage, then you can just apply reversed scale to the label, so its absolute scale will be always 1.
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 50,
fill: 'green',
});
layer.add(circle);
// tooltip
var tooltip = new Konva.Label({
x: circle.x(),
y: circle.y(),
opacity: 0.75,
});
layer.add(tooltip);
tooltip.add(
new Konva.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowOpacity: 0.5,
})
);
tooltip.add(
new Konva.Text({
text: 'Try to zoom with wheel',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
})
);
var scaleBy = 1.01;
stage.on('wheel', (e) => {
e.evt.preventDefault();
var oldScale = stage.scaleX();
var pointer = stage.getPointerPosition();
var mousePointTo = {
x: (pointer.x - stage.x()) / oldScale,
y: (pointer.y - stage.y()) / oldScale,
};
var newScale =
e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;
stage.scale({ x: newScale, y: newScale });
// apply reversed scale to label
// so its absolte scale is still 1
tooltip.scale({ x: 1 / newScale, y: 1 / newScale })
var newPos = {
x: pointer.x - mousePointTo.x * newScale,
y: pointer.y - mousePointTo.y * newScale,
};
stage.position(newPos);
});
<script src="https://unpkg.com/konva#8.3.0/konva.min.js"></script>
<div id="container"></div>

Destroying multiple shapes on end of KonvaJS tween

So I have a for loop generating, placing and tweening 20 rectangles. However the code only destroys the last generated rectangle. Is there an (ideally simple) way to ensure that the .destroy() applies to every rectangle instead of the last one?
$("#combat").click(function() {
for (var i = 0; i < 20; i++){
var rect = new Konva.Rect({
x: -500,
y: stage.height()*Math.random(),
width: 480,
height: 20,
fill: 'green',
stroke: 'black',
strokeWidth: 3
});
layer.add(rect);
tween = new Konva.Tween({
node: rect,
duration: 1,
x: 500,
onFinish: function() {
rect.destroy()
}
}).play();
}
});

var tween = new Konva.Tween({
node: pentagon,
duration: 1,
x: 500,
onFinish: function() {
// this will be tween instance
// this.node will be rectangle
console.log(this.node);
}
}).play();

You can use Group object for this:
EDIT:
$("#combat").click(function() {
var rectGroup = new Konva.Group();
for (var i = 0; i < 20; i++){
var rect = new Konva.Rect({
x: -500,
y: stage.height()*Math.random(),
width: 480,
height: 20,
fill: 'green',
stroke: 'black',
strokeWidth: 3
});
rectGroup.add(rect);
layer.add(rectGroup);
tween = new Konva.Tween({
node: rect,
duration: 1,
x: 500,
onFinish: function() {
rectGroup.destroy()
}
}).play();
}
});

Canvas Shape having control points

I have made a Bezier Shape in kinetic js with control points on it vertices. the code allows the user to drag the starting, ending and control points thereby modifying the shape of the curve like shown below.
The link to the js fiddle containing the above code is http://jsfiddle.net/Lucy1/da90vct4/2/
Code for the anchor points is
var room = new Kinetic.Shape({
x: 0,
y: 0,
width: 100,
height: 100,
stroke: "black",
fill: 'ivory',
drawFunc: function (context) {
var x = this.x();
var y = this.y();
var w = this.width();
var h = this.height();
var trX = anchorTR.x();
var trY = anchorTR.y();
var brX = anchorBR.x();
var brY = anchorBR.y();
var blX = anchorBL.x();
var blY = anchorBL.y();
var tlX = anchorTL.x();
var tlY = anchorTL.y();
context.beginPath();
context.moveTo(tlX, tlY);
// top
context.bezierCurveTo(x + w / 3, y, x + w * 2 / 3, y, trX, trY);
// right
context.bezierCurveTo(x + w, y + h / 3, x + w, y + h * 2 / 3, brX, brY);
// bottom
context.bezierCurveTo(x + w * 2 / 3, y + h, x + w / 3, y + h, blX, blY);
// left
context.bezierCurveTo(x, y + h * 2 / 3, x, y + h / 3, tlX, tlY);
context.closePath();
context.fillStrokeShape(this);
}
});
g.add(room);
var anchorTR = new Kinetic.Circle({
x: 100,
y: 0,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorTR);
var anchorBR = new Kinetic.Circle({
x: 100,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBR);
var anchorBL = new Kinetic.Circle({
x: 0,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBL);
var anchorTL = new Kinetic.Circle({
x: 0,
y: 0,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorTL);
layer.draw();
Currently i'm defining multiple kinetic circles for the anchor points and multiple variables for positioning the anchor points.I'm trying to optimize the code in such a way that i can reuse the code multiple times without using loops but not being able to..Please help..

You can make the code reusable by encapsulating it into functions and adding some references.
Put the code that creates a group & room into a function and return the new room from that function.
Put the code that creates an anchor into a function and return the new anchor from that function.
Attach references to a room's anchors to the room node itself.
Here's a refactoring of the code and a Demo: http://jsfiddle.net/m1erickson/opsy1pn9/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var room1=makeRoom(50,50,50,50);
var room2=makeRoom(150,150,50,50);
function makeRoom(x,y,w,h){
var g=new Kinetic.Group({x:x,y:y,draggable:true});
layer.add(g);
var room=new Kinetic.Shape({
x:0,
y:0,
width:w,
height:h,
stroke:"blue",
fill: 'red',
drawFunc: function(context) {
var x=this.x();
var y=this.y();
var w=this.width();
var h=this.height();
var tlX=this.anchorTL.x();
var tlY=this.anchorTL.y();
context.beginPath();
context.moveTo(tlX,tlY);
// top
context.bezierCurveTo(x+w/3,y, x+w*2/3,y, this.anchorTR.x(),this.anchorTR.y());
// right
context.bezierCurveTo(x+w,y+h/3, x+w,y+h*2/3, this.anchorBR.x(),this.anchorBR.y());
// bottom
context.bezierCurveTo(x+w*2/3,y+h, x+w/3,y+h, this.anchorBL.x(),this.anchorBL.y());
// left
context.bezierCurveTo(x,y+h*2/3, x,y+h/3, tlX,tlY);
context.closePath();
context.fillStrokeShape(this);
}
});
g.add(room);
room.anchorTR=makeAnchor(w,0,g);
room.anchorBR=makeAnchor(w,h,g);
room.anchorBL=makeAnchor(0,h,g);
room.anchorTL=makeAnchor(0,0,g);
layer.draw();
}
function makeAnchor(x,y,group){
var anchor=new Kinetic.Circle({
x:x,
y:y,
radius:8,
fill:"green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
group.add(anchor);
anchor.moveToTop();
return(anchor);
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag green circle to change red rect</h4>
<div id="container"></div>
</body>
</html>

How to pass an event on to the nodes below in kinetics

question that is very similar but answer doesn't work in my situation
I have a circle and I want to pass the click event to any objects that are underneath it.
I have tried:
setting cancelbubble to false.
setting the cirle layer to listening= false doesn't work for me because the circle is then no longer draggable.
I have made a fiddle here
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var layer = new Kinetic.Layer();
var background = new Kinetic.Layer();
var colorPentagon = new Kinetic.RegularPolygon({
x: 80,
y: stage.getHeight() / 2,
sides: 5,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
colorPentagon.on('click', function(evt){ alert("pentagon");});
var linearGradPentagon = new Kinetic.RegularPolygon({
x: 360,
y: stage.height()/2,
sides: 5,
radius: 70,
fillLinearGradientStartPoint: {x:-50, y:-50},
fillLinearGradientEndPoint: {x:50,y:50},
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
linearGradPentagon.on('click', function(evt){ alert("pentagon");});
var radialGradPentagon = new Kinetic.RegularPolygon({
x: 500,
y: stage.height()/2,
sides: 5,
radius: 70,
fillRadialGradientEndRadius: 70,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
radialGradPentagon.on('click', function(evt){ alert("pentagon");});
background.add(colorPentagon);
//background.add(patternPentagon);
background.add(linearGradPentagon);
background.add(radialGradPentagon);
stage.add(background);
var hideCircle = new Kinetic.Circle({
x: stage.width()/2,
y: stage.height()/2,
radius: 650,
stroke: 'black',
strokeWidth: 1000,
draggable:true
});
hideCircle.on('click', function(evt){ alert("click");});
// add the shape to the layer
layer.add(hideCircle);
// add the layer to the stage
stage.add(layer);
Currently to get it to work I have to take the click coordinates and do my own detection. It works but I was hoping for something more elegant.

Here's how to pass your click event to the bottom layer nodes:
You can listen for clicks on the stage
Determine if the click is inside any node on the bottom layer
If the click was inside a node, fire the click event on that node.
Here's example code and a Demo: http://jsfiddle.net/m1erickson/sFX8y/
stage.on('contentClick',function(e){
// get the mouse position
var pos=stage.getPointerPosition();
// fetch the node on the bottom layer that is under the mouse, if any.
var hitThisNode=background.getIntersection(pos);
// if a node was hit, fire the click event on that node
if(hitThisNode){
hitThisNode.fire("click",e,true);
}
});

KineticJS - How to transition 2 shapes at once?

Here is the code: http://jsfiddle.net/MTDpC/
function drawArrow(firstShape, lastShape){
var group = new Kinetic.Group();
group.previousShape = firstShape;
group.nextShape = lastShape;
var beginX = group.previousShape.getX() + group.previousShape.getChildren()[0].getWidth() / 2;
var beginY = group.previousShape.getY() + group.previousShape.getChildren()[0].getHeight();
var endX = group.nextShape.getX() + group.nextShape.getChildren()[0].getWidth() / 2;
var endY = group.nextShape.getY() - 8;
var linha = new Kinetic.Line({
points: [ beginX, beginY, endX, endY],
name: 'linha',
stroke: '#555',
strokeWidth: 4,
lineCap: 'butt'
});
var seta = new Kinetic.RegularPolygon({
x: endX,
y: endY,
sides: 3,
radius: 4,
fill: '#555',
stroke: '#555',
strokeWidth: 4,
name: 'seta'
});
seta.rotateDeg(180);
group.add(seta);
group.add(linha);
firstShape.arrow = group;
lastShape.arrow = group;
group.reposition = function(){
var beginX = this.previousShape.getX() + this.previousShape.getChildren()[0].getWidth() / 2;
var beginY = this.previousShape.getY() + this.previousShape.getChildren()[0].getHeight();
var endX = this.nextShape.getX() + this.nextShape.getChildren()[0].getWidth() / 2;
var endY = this.nextShape.getY() - 8;
this.get('.linha')[0].transitionTo({
points:[ beginX, beginY, endX, endY],
duration: 0.0000001,
});
this.get('.seta')[0].transitionTo({
x: endX,
y: endY,
duration: 0.0000001,
});
};
return group;
}
function getProcess (processText, x, y, width) {
var group = new Kinetic.Group();
var complexText = new Kinetic.Text({
text: processText + '\nX: ' + x + '\nY: ' + y,
fontSize: 12,
fontFamily: 'Calibri',
fill: '#555',
padding: 20,
align: 'center',
name: 'Texto-Processo'
});
var rect = new Kinetic.Rect({
stroke: '#555',
strokeWidth: 5,
fill: '#ddd',
width: complexText.getWidth(),
height: complexText.getHeight(),
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 10,
name: 'Quadro-Processo'
});
group.add(rect);
group.add(complexText);
group.setDraggable(true);
group.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
group.on('mouseout', function() {
document.body.style.cursor = 'default';
});
group.on('dragmove', function(){
group.getChildren()[1].setText(this.customText + "\nX: " + this.getX() + "\nY: " + this.getY());
group.arrow.reposition();
group.arrow.draw();
});
group.setX(x);
group.setY(y);
group.customText = processText;
return group;
}
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 600,
id: 'myCanvas'
});
var layer = new Kinetic.Layer();
var processo = getProcess('Processo de Teste de canvas 1', (stage.getWidth() / 2) - 100, 10 , 100);
processo.setId('canvas1');
layer.add(processo);
var processo2 = getProcess('Processo de Teste de canvas 2', (stage.getWidth() / 2) -100, processo.getY() + 300, processo.getX());
layer.add(processo2);
layer.add(drawArrow(processo, processo2));
// add the layer to the stage
stage.add(layer);
When one of the boxes are dragged, the arrow connecting them moves too.
As the arrow was made using 2 shapes, I want to know if is there some way to use .transtionTo at the same time, because you can see some delay between the line and the triangle that forms the arrrow when you move the bottom box.

The problem is that the transitionTo function does not support transitioning points. Also, each time you move the object, you are creating a new transition object... which is extremely slow. You do not need transitions for this, transitions are only useful for animating things automatically when the user is not meant to control them.
Try this instead:
this.get('.linha')[0].setPoints([beginX, beginY, endX, endY]);
this.get('.seta')[0].setPosition(endX,endY);
this.getLayer().draw();
/* this.get('.linha')[0].transitionTo({ //cant transition points
points: [beginX, beginY, endX, endY],
duration: 0.0000001,
});
this.get('.seta')[0].transitionTo({ // lags because everytime you move, a new transition is created, no this would be extremely slow
x: endX,
y: endY,
duration: 0.0000001,
});
*/
http://jsfiddle.net/MTDpC/1/
works fast eh?