Develop Reference

KonvaJS - How to add shape with button trigger?

Sorry for bad grammar-
i have a problem about how to add shape with button trigger.
but isn't working
here my code :
HTML
<button id="btnCreateRectangle" class="btn-primary-blue">Button Text</button>
And here my js :
function addRectangle(layer) {
var scale = 1;
var rectangle = new Konva.Rect({
x: 12,
y: 12,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: "#89b717",
opacity: 0.8,
draggable: true,
name: 'rect',
width: 128,
height: 50,
scale: {
x: scale,
y: scale
},
shadowColor: "black",
shadowBlur: 4,
shadowOffset: {
x: 5,
y: 5
},
shadowOpacity: 0.6,
// custom attribute
startScale: scale
});
layer.add(rectangle);
}
document
.getElementById('btnCreateRectangle')
.addEventListener('click', function () {
addRectangle(layer)
});
Im very pretty new in javasrcipt language ,
any suggest or answer will be appreciate
thanks

from the documentation of KonvaJS after adding the rect to layer, you should add that layer to stage https://konvajs.org/docs/overview.html
stage.add(layer);

Add shape as background with fabricjs

I want to draw a shape as a background using fabric.js. I am trying to set scalable to false when creating the shape but it isn't working as expected.
I can’t select other shapes when scalable is set to false. Can someone tell me how can I do this?
The code I am using is below:
var pol = new fabric.Polygon([
{x: 200, y: 0},
{x: 250, y: 50},
{x: 250, y: 100},
{ x: 150, y: 100},
{x: 150, y: 50}
],
{
left: 0,
top: 0,
scaleX: 2,
scaleY: 2,
fill: 'green'
}
);
Thanks in advance.

You could set any shape as a background in fabric.js , using setBackgroundImage method. This method won't affect other shapes and will resolve the object selection issue.
ᴅᴇᴍᴏ
var canvas = new fabric.Canvas('c');
var pol = new fabric.Polygon([
{ x: 200, y: 0 },
{ x: 250, y: 50 },
{ x: 250, y: 100 },
{ x: 150, y: 100 },
{ x: 150, y: 50 }],
{
left: 0,
top: 0,
scaleX: 2,
scaleY: 2,
fill: 'green'
});
canvas.setBackgroundImage(pol);
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
// create a rectangle with a fill and a different color stroke
var pol = new fabric.Polygon([
{x: 200, y: 0},
{x: 250, y: 50},
{x: 250, y: 100},
{ x: 150, y: 100},
{x: 150, y: 50}
],
{
left: 0,
top: 0,
selectable:false,
fill: 'green'
}
);
pol.set({
scaleX: canvas.width/pol.width,
scaleY: canvas.height/pol.height,
})
canvas.setBackgroundImage(pol);
canvas.renderAll();
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>
This one will fit to any canvas size, set scaleX and scaleY

Add listener to a group

How i can do something like this? all the shapes in the group should not listen to the event, but the group should operate on the event, but do not work. I gave the example of the two groups, and they are actually very much, and so I have to add a listener to the layer, and listen to the babbling events all internal groups.
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 800
});
var layer = new Kinetic.Layer();
var group1 = new Kinetic.Group({listening: true});
var group2 = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, 'black', 1, 'white'],
stroke: 'black',
strokeWidth: 4
});
var circle2 = new Kinetic.Circle({
x: 100,
y: 100,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, 'black', 1, 'white'],
stroke: 'black',
strokeWidth: 4
});
var circle3 = new Kinetic.Circle({
x: 300,
y: 300,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, '#678345', 1, '#824444'],
stroke: 'black',
strokeWidth: 4
});
var circle4 = new Kinetic.Circle({
x: 200,
y: 200,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, '#678345', 1, '#824444'],
stroke: 'black',
strokeWidth: 4
});
group1.add(circle);
group1.add(circle2);
group2.add(circle3);
group2.add(circle4);
// add the triangle shape to the layer
layer.add(group1);
layer.add(group2);
layer.on("click",onClick);
// add the layer to the stage
stage.add(layer);
function onClick(e){
console.log("click",e.target);
}
Please help!

Only nodes in a group will trigger events
your circles will trigger events
clicking in a non-node area of a group will not trigger any events
A workaround is to add a transparent rect as a background covering the entire group width/height.
var group=new Kinetic.Group({
x:0,y:0,width:100,height:100
})
var groupListener=new Kinetic.Rect({
x:group.x(),
y:group.y(),
width:group.width(),
height:group.height(),
});
group.add(groupListener);
Then you can assign a listener to the "invisible" groupListener rectangle
groupListener.on("click",function(){
console.log("clicked on non-node area of group");
});
A Demo: http://jsfiddle.net/m1erickson/ur6be/

KineticJS - Creating a Spline with a Gradient Stroke

I'm trying to stroke my Kinetic Spline object with a gradient instead of a solid color. However, my spline is turning out black. Any ideas?
Here's my code:
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueSpline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
strokeWidth: 10,
lineCap: 'round',
tension: 1,
fillLinearGradientStartPoint: [73, 160],
fillLinearGradientEndPoint: [300, 109],
fillLinearGradientColorStops: ['#ff0000', '#00ff00'],
fillPriority: 'linear-gradient'
});
layer.add(blueSpline);
stage.add(layer);

You can try this:
var ctx = layer.getContext();
var grad = ctx.createLinearGradient(73, 160, 300, 109);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(1, '#00ff00');
var blueSpline = new Kinetic.Spline({
...
stroke: grad,
...
});
Here is an example:
http://jsfiddle.net/qK6nq/

KineticJS does not support gradient strokes--only gradient fills.

KineticJS: How to scale the radius of a Group in Tween?

I'm trying to make a tween which makes a ball bigger and disappear from the screen. It's easy if you do it for a circle.
Tween for only circle: http://jsfiddle.net/VrUB6/
Code:(it won't let me paste only the link):
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 500
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 100,
y: 100,
radius: 30,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 90,
fillRadialGradientColorStops: [0, 'red', 1, 'yellow'],
stroke: 'black',
strokeWidth: 0.4,
opacity: 1
});
layer.add(circle);
stage.add(layer);
circle.on('mousedown', function(){
var tween = new Kinetic.Tween({
node: circle,
duration: 0.8,
radius: 80,
opacity: 0,
});
tween.play();
});
But what I want to do is, same tween like this, but a text in the circle. For this I have to create a group, add circle and text in it and then tween the group(I guess). But if I do this, I can't change the radius in tween. It won't work.
Here is my work for it: http://jsfiddle.net/N2J2u/
Code:
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 500
});
var layer = new Kinetic.Layer();
var circ = new Kinetic.Circle({
x: 100,
y: 100,
radius: 30,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 90,
fillRadialGradientColorStops: [0, 'red', 1, 'yellow'],
stroke: 'black',
strokeWidth: 0.4,
opacity: 1
});
var group = new Kinetic.Group({
draggable: true,
});
group.add(circ);
var complexText = new Kinetic.Text({
x: 97,
y: 90,
text: '4',
fontSize: 30,
fontFamily: 'Calibri',
fill: '#555',
padding: -5,
align: 'center'
});
group.add(complexText);
layer.add(group);
stage.add(layer);
group.on('mousedown', function(){
var tween = new Kinetic.Tween({
node: group,
duration: 0.8,
radius: 80,
opacity: 0,
});
// start tween after 20 seconds
setTimeout(function() {
tween.play();
});
});
Thanks for the help.

Set up multiple tweens where the circle expands+fades and the number fades:
group.on('mousedown', function(){
var tweenCirc = new Kinetic.Tween({
node: circ,
duration: 0.8,
width: 80,
opacity: 0,
});
var tweenComplexText = new Kinetic.Tween({
node: complexText,
duration: 0.8,
opacity: 0,
});
// start tween after 20 seconds
setTimeout(function() {
tweenCirc.play();
tweenComplexText.play();
});
});
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/dvfr2/
<!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-v4.5.4.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 500
});
var layer = new Kinetic.Layer();
stage.add(layer);
var group = new Kinetic.Group({ draggable: true });
layer.add(group);
var circ = new Kinetic.Circle({
x: 100,
y: 100,
radius: 30,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 90,
fillRadialGradientColorStops: [0, 'red', 1, 'yellow'],
stroke: 'black',
strokeWidth: 0.4,
opacity: 1
});
group.add(circ);
var complexText = new Kinetic.Text({
x: 97,
y: 90,
text: '4',
fontSize: 30,
fontFamily: 'Calibri',
fill: '#555',
padding: -5,
align: 'center'
});
group.add(complexText);
group.on('mousedown', function(){
var tweenCirc = new Kinetic.Tween({
node: circ,
duration: 0.8,
width: 80,
opacity: 0,
});
var tweenComplexText = new Kinetic.Tween({
node: complexText,
duration: 0.8,
opacity: 0,
});
// start tween after 20 seconds
setTimeout(function() {
tweenCirc.play();
tweenComplexText.play();
});
});
layer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>