We Keep Coding

Draw a line automaticlly tied to circle on Konva JS

i want to draw a line beetween a circle everytime i add a circle on konva js. and the circle is dragable. so i want the line follow the circle when i drag it. How to do it? or maybe i'm doing it wrong. Here my code https://jsfiddle.net/nutsi/2L7v6hy3/13/
var stage = new Konva.Stage({
height: window.innerHeight * 0.85,
width: window.innerWidth * 0.85,
container: "konva"
});
var layer = new Konva.Layer();
stage.on("click", function(){
var points = [];
var pos = this.getRelativePointerPosition();
var dot = new Konva.Circle({
x: pos.x,
y: pos.y,
fill: 'red',
radius: 5,
id: "seljal",
draggable: true
});
layer.add(dot)
var a = layer.find("#seljal")
for(let x = 0; x < a.length; x++){
points.push(a[x].attrs.x, a[x].attrs.y)
}
var line = new Konva.Line({
points: points,
stroke: "red",
strokeWidth: 2,
dash: [5, 5],
opacity: 1,
closed: !0,
id: "line"
})
var b = layer.find("#line")[0]
if(b) b.destroy();
layer.add(line);
})
stage.add(layer);
stage.draw();

Place node centred on rotated note

I have following example stage.
const rectangle = new Konva.Rect({
width: 300,
height: 100,
x: stage.width() / 2,
y: stage.height() / 2,
fill: 'blue',
rotation: 140
});
layer.add(rectangle);
layer.draw();
const tooltip = new Konva.Label({
x: rectangle.x() + (rectangle.width() / 2),
y: rectangle.y() + (rectangle.height() / 2),
opacity: 0.75
});
tooltip.add(
new Konva.Tag({
fill: 'green',
pointerDirection: 'down',
pointerWidth: 6,
pointerHeight: 4,
lineJoin: 'round'
})
);
tooltip.add(new Konva.Text({
text: 'Hello world',
fontSize: 12,
padding: 5,
fill: 'white',
}));
layer.add(tooltip);
layer.draw();
When the rectangle has no rotation I am able to place the tooltip correctly in the centre of the node. When the rectangle has some rotation the tooltip is not centred any more.
Without changing the attributes of the rectangle or rotating the tooltip, how can I place the tooltip in the centre of the rectangle node?
JSBIN example:
https://jsbin.com/wopoxuligi/edit?html,js,output

First, you need to update your declaration for Konva in the html script tag as you are referencing an old version.
<script src="https://unpkg.com/konva#7.0.3/konva.min.js"></script>
Because this shape is a rect you can call rectangle.getClientRect() to get the position on the stage, then use simple center-math to place your label. Slip this code in at the end of your current code where you do the last layer.draw();
const cliRect = rectangle.getClientRect();
let pos = {
x: cliRect.x + (cliRect.width )/2,
y: cliRect.y + (cliRect.height )/2
};
tooltip.x(pos.x)
tooltip.y(pos.y)
layer.draw();
This will leave the pointer of the label pointing at the centre of the rotated rectangle, with the label being non-rotated. Working snippet below - run it full screen.
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
draggable: true
});
const layer = new Konva.Layer();
stage.add(layer);
const rectangle = new Konva.Rect({
width: 300,
height: 100,
x: stage.width() / 2,
y: stage.height() / 2,
fill: 'blue',
rotation: 140
});
layer.add(rectangle);
layer.draw();
const tooltip = new Konva.Label({
x: rectangle.x() + (rectangle.width() / 2),
y: rectangle.y() + (rectangle.height() / 2),
opacity: 0.75
});
tooltip.add(
new Konva.Tag({
fill: 'green',
pointerDirection: 'down',
pointerWidth: 6,
pointerHeight: 4,
lineJoin: 'round'
})
);
tooltip.add(new Konva.Text({
text: 'Hello world',
fontSize: 12,
padding: 5,
fill: 'white',
}));
layer.add(tooltip);
const cliRect = rectangle.getClientRect();
// Extra red rect to illustrate client rect. Not needed in solution
const rectangle1 = new Konva.Rect({
width: cliRect.width,
height: cliRect.height,
x: cliRect.x,
y: cliRect.y,
stroke: 'red'
});
layer.add(rectangle1);
let pos = {
x: cliRect.x + (cliRect.width )/2,
y: cliRect.y + (cliRect.height )/2
};
// Set tooltip position taking account of stage draggind
tooltip.x(pos.x - stage.x())
tooltip.y(pos.y - stage.y())
console.log(pos)
layer.draw();
<script src="https://unpkg.com/konva#7.0.3/konva.min.js"></script>
<div id="container"></div>
EDIT: In a comment the OP pointed out that the real use case requires the stage to be draggable before the label is added and that after the drag the calc of the label position fails. This is because getClientRect() gives the position in the client container without adjustment for the stage movement. To make the code work with a dragged stage, change the two lines that set tooltip.x & y to adjust by the stage.x & y, as follows:
tooltip.x(pos.x - stage.x())
tooltip.y(pos.y - stage.y())

I added offset to rectangle, to rotate it by its center point and managed to have the tooltip centered.
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
var group1 = new Konva.Group({
draggable: true
});
const rectWidth = 300;
const rectHeight = 100;
const rectangle = new Konva.Rect({
width: rectWidth,
height: rectHeight,
x: stage.width() / 2,
y: stage.height() / 2,
fill: 'blue',
rotation: 140,
offset: {
x: rectWidth / 2,
y: rectHeight / 2,
},
});
const tooltip = new Konva.Label({
x: rectangle.x() + (rectangle.width() / 2),
y: rectangle.y() + (rectangle.height() / 2),
offset: {
x: rectangle.width() / 2,
y: rectangle.height() / 2,
},
opacity: 0.75
});
tooltip.add(
new Konva.Tag({
fill: 'green',
pointerDirection: 'down',
pointerWidth: 6,
pointerHeight: 4,
lineJoin: 'round'
})
);
tooltip.add(new Konva.Text({
text: 'Hello world',
fontSize: 12,
padding: 5,
fill: 'white',
}));
layer.add(rectangle);
layer.add(tooltip);
layer.draw();
<script src="https://unpkg.com/konva#^2/konva.min.js"></script>
<div id="container"></div>

How to hide one element from KONVA group

I have a KONVA group with three object in it. I want to show/hide one object of the group.
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
const group = new Konva.Group();
layer.add(group);
const circle1 = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 50,
fill: 'green',
visible: true
});
const circle2 = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 30,
fill: 'red',
visible: true
});
const circle3 = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 10,
fill: 'blue',
visible: true
});
group.add(circle1);
group.add(circle2);
group.add(circle3);
layer.draw();
//group.hide(); // if I use this it will hide entire group but i want to hide only one object
layer.draw();
I want to show/hide only the circle2 from the Konva group. can any one please help me?

just call hide method of circle2.
circle2.hide();
This circle2 is added in your group by reference. So if you make any change in circle2, it will reflect in group.

KineticJS: Setting Shadow on shape causing error in tween

I am creating pie chart using multiple Kinetic.Wedges and a tween that moves the pieces out.
This works fine, but when I attempt to add
shadowColor: 'black',
shadowBlur: 2,
shadowOffset: 10,
shadowOpacity: 0.5
in the wedge instantiation it bugs out - the error "TypeError: b is undefined" comes up. If I comment out the tween instantiation the shape loads without error (with shadows) so I suspect something in tween instantiation is causing it.
Here is code for this purpose.
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200});
var splits = [{perc: 30, colour: "red"},
{perc: 15, colour: "blue"},
{perc: 20, colour: "green"},
{perc: 35, colour: "yellow"}];
var layer = new Kinetic.Layer();
var startPos = 0;
for (var i = 0; i < splits.length; i++){
(function(){
var wedge = new Kinetic.Wedge({
x: stage.getWidth() / 3,
y: stage.getHeight() / 2,
radius: 70,
angleDeg: toAngleDeg(splits[i].perc),
fill: splits[i].colour,
stroke: 'black',
strokeWidth: 1,
rotationDeg: startPos});
layer.add(wedge);
wedge.tween = new Kinetic.Tween({
node: wedge,
rotationDeg: 90 + (180 - (toAngleDeg(splits[i].perc)/2)),
x: stage.getWidth() / 1.5,
easing: Kinetic.Easings.EaseInOut});
startPos += toAngleDeg(splits[i].perc);
wedge.on('mouseup', function(){
wedge.setZIndex(100);
wedge.tween.play();}
);
})()}
stage.add(layer);
What am i doing wrong here?

Isometric cube projection in html canvas

How do you do the isometric cube in canvas 2d? I've followed True Isometric Projection with HTML5 Canvas to get the top of the cube, but how do you do the left and right sides?
Note: I want to use the Kinetic.js Objects with their event handling features intact.
This is what I have right now:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200,
//scale: [1, 0.5],
//scale: [1, 0.86062],
//rotation: -30 * Math.PI /180,
});
var layer = new Kinetic.Layer({
scale: [1,0.5],
});
var foo = false;
layer.beforeDraw(function(){
if (!foo) {
var context = this.getContext();
var sx = 45*Math.PI/180;
// .75 horizontal shear
var sy = 0;
// no vertical shear
// apply custom transform
//context.transform(1, sy, sx, 1, 0, 0);
//context.scale(1, 0.5);
//context.rotate(45 * Math.PI /180);
//var angle = 30;
//context.setTransform(1, Math.tan(30), 0, 1, 0, 0);
}
foo = true;
});
layer.afterDraw(function(){
var context = this.getContext();
//context.scale(1, 2);
//context.rotate(-45 * Math.PI /180);
});
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 50,
height: 50,
fill: "blue",
stroke: "black",
strokeWidth: 4,
rotation: -45 * Math.PI /180,
//scale: [1, 0.5],
});
rect.on("mouseover", function() {
//alert(this.getFill());
this.setFill("red");
layer.draw();
});
rect.on("mouseout", function() {
//alert(this.getFill());
this.setFill("blue");
layer.draw();
});
// add the shape to the layer
layer.add(rect);
// add the layer to the stage
stage.add(layer);
};
</script>
​
demo: http://jsfiddle.net/F5SzS/

Maybe use Polygon instead? Here's an example;
http://jsfiddle.net/Ygnbb/
I made 3 parts separate, but you could do it as one ploygon I guess. Positions and sizes need some tweaking though...