Develop Reference

Parallel lines separator in Konva

I'm trying to draw a separator with 2 lines for my road. I already tried to make it with just 2 parallels lines, but when I made my road curve, it doesn't look very good. Like this:
Small curve:
Big curve:
Because of it now I am just drawing one line with white background behind the line with black background. But sometimes my main road is not black. How can I make space between these lines transparent?
Examples:
Normal work:
Work with road with different background:
You can drag separator in the example below
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var line = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 100,
stroke: 'black',
draggable: true,
});
var line_2 = new Konva.Line({
points: [400, 100, 500, 200],
strokeWidth: 100,
stroke: 'red',
draggable: true,
});
const group_sep = new Konva.Group({
draggable: true,
});
var sep_1 = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 20,
stroke: 'green',
});
var sep_2 = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 10,
stroke: '#000000',
});
group_sep.add(sep_1);
group_sep.add(sep_2);
layer.add(line);
layer.add(line_2);
layer.add(group_sep);
stage.add(layer);
layer.draw();
<script src="https://unpkg.com/konva#4.0.16/konva.min.js"></script>
<div id="container"></div>

You can use blend mode via globalCompositeOperation to "cut" one line from another.
const group_sep = new Konva.Group({
draggable: true,
});
var sep_1 = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 20,
stroke: 'green',
});
// destination-out will cut line from previous drawings
var sep_2 = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 10,
stroke: '#000000',
globalCompositeOperation: 'destination-out'
});
But you should know that destination-out will cut your line from ALL previous drawings on the canvas. It means it may cut the background too. To fix the issues you can move your group with the lines into another Konva.Layer or just cache the group:
group_sep.cache();
Note: remember to recache to group every time you change the lines.
Demo: https://jsbin.com/ravodomigi/3/edit?html,js,output

How to get the center point of canvas

How to get The center point of the canvas object/rectangle. I use the Konvajs library for my small project. in the konva documentation said that you need to center the point to get good rotation.
http://konvajs.github.io/docs/animations/Rotation.html
Ex
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: 100,
height: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50 // how to solve this using formula so it will dynamic,
y: 25 // how to solve this using formula so it will dynamic
}
});

Rotating rectangular objects around their centers
By default, KonvaJS sets the rotation point of a rectangle at its top-left corner. Therefore to rotate from the center of the rectangle you must push the rotation point to the center of the rectangle.
You can do this by setting the offsetX=rectangleWidth/2 and offsetY=rectangleHeight/2
var yellowRectWidth=100;
var yellowRectHeight=50;
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: yellowRectWidth,
height: yellowRectHeight,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: {
x: yellowRectWidth/2,
y: yellowRectHeight/2
}
});
Rotating circular objects around their centers
By default, KonvaJS sets the rotation point of circular shapes at their centerpoints. Therefore to rotate from the center of circular shapes you won't have to set any offsets.

How to draw an arc with fabric.js?

I want to draw an arc and I'm using a circle with a start and an end angle for this. But something is wrong. Here is my code for this:
var circle = new fabric.Circle({
radius: 30,
left: 20,
top: 20,
fill: "rgba(0, 0, 0, 0)",
stroke: 'black',
startAngle: 0,
endAngle: Math.PI
});
canvas.add(circle);
You can see (on jsfiddle) it always draws a complete circle — http://jsfiddle.net/tfn1772f/
What is wrong?

What about drawing an arc via fabric.Path? Try something like this:
var arc1 = new fabric.Path("M 255 135 A 50 50 0 0 1 200 110", {
stroke: 'black',
fill: "white"
});
Also see: https://groups.google.com/forum/#!msg/fabricjs/fp19BLlqauw/a-smtqe5ms8J
You could write a function that accepts params and generates the path. Looks like fabric also has a static function in fabric.util.drawArc which you could use:
http://fabricjs.com/docs/fabric.util.html#drawArc

kineticjs rect fillText

I have KineticJS rect already fill with 'blue' color, I want to show Text on this rect box. But my below code not showing anything. Also I need to assign this label text on button click, the code for the same is also below.
drawShape = new Kinetic.Rect({
id: shapeId,
name: shapeName,
x: 0,
y: 0,
width: 150,
height: 40,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 3,
fillText: "Step" + stepNumber
});
function OnApplyPropertiesClick(){
drawShape.fillText(document.getElementById("txtLabel").value);
}
any help on this?? please.
Thanks
Biru

I don't think you can add text to a rectangle object, only a fill type of:
[color, linear gradient, radial gradient, or pattern]
To solve this i created a group, then added a rectangle and text object to it, when i wanted to create a rectangle with text on it:
var group = new Kinetic.Group({
});
var rectangle = new Kinetic.Rect({
x: 5,
y: 5,
width: 80,
height: 35,
fill: "green",
stroke: "black",
strokeWidth: 2
});
var rectangleText = new Kinetic.Text({
x: 15,
y: 10,
text: 'test',
fontSize: 20,
fontFamily: 'Calibri',
textFill: 'black'
});
group.add(rectangle);
group.add(rectangleText);
layer.add(group);
You should be able to adapt your listener to then apply it to this.
I've done a jsfiddle to show what i mean:
http://jsfiddle.net/B85Ff/

Have you added drawShape to any layer yet? Doesn't appear in the snippet you posted.
Also, you need to draw the layer (like a refresh) at the end of your OnApplyPropertiesClick() function.

Reset to Default position with KineticJS

I have the following circles in my game. The player drags them into different locations in the game. When the player selects, play again, I want the shapes to go back to the original position stated in the init function. How should I go about this? Thank you.
stage = new Kinetic.Stage({
container: "container",
width: 900,
height: 550
});
shapes = new Kinetic.Layer();
function init() {
circle1 = new Kinetic.Circle({
x: stage.getWidth() / 3.2,
y: stage.getHeight() / 3.2,
radius: radius,
fill: "blue",
stroke: "black",
strokeWidth: 4,
name: "circle",
draggable: true
});
shapes.add(circle1)
stage.add(shapes)

Store defaults in a separate variable, then use .setPosition( x, y ) to reset it:
//store settings
var settings = {
x: stage.getWidth() / 3.2,
y: stage.getHeight() / 3.2,
radius: radius,
fill: "blue",
stroke: "black",
strokeWidth: 4,
name: "circle",
draggable: true
};
//use settings
circle1 = new Kinetic.Circle(settings);
//after move, reset using:
circle1.setPosition(settings.x,settings.y);

you can also use the super handy setAttrs method like this:
circle1.setAttrs(settings);
Cheers!

I know this question is fairly old but I just solved something like this.
stage.removeChildren();
stage.setAttrs(stage.defaultNodeAttrs);
The stage.reset() doesn't work anymore, but this should do what you want.