Here is the following function, I would like to pass the id and name values to the function, and have them used when creating the circle.
I try creating a variable with the function, but I was unable to figure out the format to use when place the vaiable after the colon.
function addCircle(){
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
id: 1,
name: 'test',
});
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
};
Thank you in advance for your help.
In vanilla JS, (ES2015 and above):
function addCircle(id, name){
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
id,
name
});
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
};
Usage:
addCircle(1, 'test')
Where
{
// ...
id,
name
}
Is short-hand syntax for
{
// ...
id: id,
name: name
}
Related
I am trying to draw lines around polygon, It should draw different colour of line from one point to the next, I am stuck on attaching line to the last point of polygon, There are also red circles which are being created successfully on polygon corners, Lines are being drawn when box is moved with mouse, using 'modified' event
JSFiddle here
The issue is here:
var lastPoint = (i=>polygon.points.length)?0:i+1;
var fromX = transformedPoints[lastPoint].x;
var fromY = transformedPoints[lastPoint].y;
return new fabric.Line([p.x, p.y, 25, fromX],{
JS code
var canvas = new fabric.Canvas("c", {
selection: false
});
var polygon = new fabric.Polygon([
new fabric.Point(150, 50),
new fabric.Point(250, 50),
new fabric.Point(250, 150),
new fabric.Point(150, 150)
]);
polygon.on("modified", function() {
document.getElementById("p").innerHTML = JSON.stringify(this);
var matrix = this.calcTransformMatrix();
var transformedPoints = this.get("points")
.map(function(p) {
return new fabric.Point(
p.x - polygon.pathOffset.x,
p.y - polygon.pathOffset.y);
})
.map(function(p) {
return fabric.util.transformPoint(p, matrix);
});
var circles = transformedPoints.map(function(p) {
return new fabric.Circle({
left: p.x,
top: p.y,
radius: 3,
fill: "red",
originX: "center",
originY: "center",
hasControls: false,
hasBorders: false,
selectable: false
});
});
document.getElementById("l").innerHTML = JSON.stringify(transformedPoints);
var colors = ['#E5097F', '#00A0E3', '#009846', '#FECC00', '#000', '#000', '#000'];
var lines = transformedPoints.map(function(p, i) {
document.getElementById("r").innerHTML = JSON.stringify(p);
var lastPoint = (i => polygon.points.length) ? 0 : i + 1;
var fromX = transformedPoints[lastPoint].x;
var fromY = transformedPoints[lastPoint].y;
document.getElementById("r").innerHTML = fromX + ' - > ' + fromY;
return new fabric.Line([p.x, p.y, 25, fromX], {
stroke: colors[i],
strokeWidth: 10,
hasBorders: false,
strokeDashArray: [8, 13]
});
});
side_a = new fabric.Line([150, 0, 50, 0], {
stroke: "red",
strokeWidth: 10,
hasBorders: false
});
this.canvas.clear().add(this).add(side_a).add.apply(this.canvas, lines).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});
canvas.add(polygon).renderAll();
UPDATE:
I am able to generate those lines by providing static values, for demo. before 'modified' event happens I have included some lines where it should go:
side_a = new fabric.Line([250, 50, 150, 50], {
stroke: "red",
strokeWidth: 10,
hasBorders: false
});
side_b = new fabric.Line([150, 150, 150, 50], {
stroke: "green",
strokeWidth: 10,
hasBorders: false
});
side_c = new fabric.Line([250, 150, 250, 50], {
stroke: "blue",
strokeWidth: 10,
hasBorders: false
});
side_d = new fabric.Line([150, 150, 260, 150], {
stroke: "green",
strokeWidth: 10,
hasBorders: false
});
canvas.add(polygon).add(side_a).add(side_b).add(side_c).add(side_d).renderAll();
Now just need to figure out how to create those dynamically. new JSFIDDLE HERE
UPDATE:
finally I was able to solve it by running in loop.
I was able to solve it using looping through the points and than generating lines:
var fromX = transformedPoints[i].x;
var fromY = transformedPoints[i].y;
return new fabric.Line([p.x, p.y , fromX, fromY], {
stroke: colors[i],
strokeWidth: 10,
hasBorders: true,
strokeDashArray: [20, 5]
});
i need an input type range in canvas for some purposes, i need to use that to change my fontsize. I already make the shape and also drag able, but the circle controller go beyond the line.
Just preview the bin to see what i mean. Jsbin
i want to limit the draging area to the line only like the input range works.
This is the documentation of KonvaJs library.
this is working, coded by Lavrton
Source
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 Track = new Konva.Line({
x: 44,
y: 55,
points: [60, 0, 0, 0, 0, 0, 0, 0],
stroke: '#BDC3C7',
strokeWidth: 6,
visible: true,
name: 'TrackLine',
lineCap: 'sqare',
lineJoin: 'sqare'
});
var TrackBall = new Konva.Circle({
x: 44,
y: 55,
stroke: '#D35400',
fill: '#ddd',
strokeWidth: 2,
name: 'TrackControl',
radius: 8,
draggable: true,
dragOnTop: false,
visible: true,
dragBoundFunc: function(pos) {
console.log(pos.x, Math.min(44, pos.x))
return {
x: Math.min(104, Math.max(44, pos.x)),
y: this.getAbsolutePosition().y
};
}
});
layer.add(Track);
layer.add(TrackBall);
stage.add(layer);
<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" class="CanCont"></div>
I'm trying jigsaw puzzle using kineticJs. I got the irregular shape pieces but source image is not displayed or fill in it. I'm stuck with this part.
fill:{
image:imageObj,
x:pieceWidth,
y:pieceHeight,
},
stroke: "#000000",
strokeWidth: 4,
lineCap: "round",
draggable: true
Looks like you need to use fillPatternImage instead of fill.
var patternPentagon = new Kinetic.RegularPolygon({
x: 220,
y: stage.height()/2,
sides: 5,
radius: 70,
fillPatternImage: images.darthVader,
fillPatternOffset: {x:-220, y:70},
stroke: 'black',
strokeWidth: 4,
draggable: true
});
After upgrading kineticjs from 4.0.5 to 4.5.1, I get
Uncaught TypeError: Object #<Object> has no method 'transitionTo'
Following code works with the previous version:
gameLayer.transitionTo({
duration: '0.5',
opacity: 1,
callback: function() {
intervalId = setInterval(reDraw, 33);
isInteractive = true;
}
});
Whats the the alternative function for transitionTo in 4.5.1
UPDATE
I opened an issue over Github, according to the guy transitionTo has been removed and it is replaced by Tween
Regards,
You can use the onFinish attribute as below :
var tween = new Kinetic.Tween({
node: rect,
duration: 1,
x: 400,
y: 30,
rotation: Math.PI * 2,
opacity: 1,
strokeWidth: 6,
scaleX: 1.5,
onFinish: function() {console.log('onFinish');}
});
The alternative is TweenLite. It has much more functionalities than the classic Kinetic transitions so they have been deprecated and TweenLite is fully adapted to KineticJS shapes.
Here is a tutorial that shows us how to use these transitions.
http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 2,
opacity: 0.2
});
layer.add(rect);
stage.add(layer);
var tween = new Kinetic.Tween({
node: rect,
duration: 1,
x: 400,
y: 30,
rotation: Math.PI * 2,
opacity: 1,
strokeWidth: 6,
scaleX: 1.5
});
// start tween after 20 seconds
setTimeout(function() {
tween.play();
}, 2000);
In kintic JS of HTML5 I am trying to vanish lines on mouse over it works fine when I am doing it with variables:
http://jsfiddle.net/Vbwta/
var layer = new Kinetic.Layer();
lines0= new Kinetic.Line({
points: [73+10, 70+10, 340+10, 23+10],
stroke: 'red',
strokeWidth: 7,
});
lines0.on('mouseover', function() {
lines0.hide();
layer.draw();;
});
lines1= new Kinetic.Line({
points: [53, 50, 320, 03],
stroke: 'red',
strokeWidth: 7,
});
lines1.on('mouseover', function() {
//document.body.style.cursor = 'pointer';
lines1.hide();
layer.draw();;
});
But the same thing does not work properly when I am using array:
http://jsfiddle.net/uNak5/
var lines= new Array();
lines[0]= new Kinetic.Line({
points: [73+10, 70+10, 340+10, 23+10],
stroke: 'red',
strokeWidth: 7,
});
lines[0].on('mouseover', function() {
lines[a].hide();
layer.draw();;
});
lines[1]= new Kinetic.Line({
points: [53, 50, 320, 03],
stroke: 'red',
strokeWidth: 7,
});
lines[1].on('mouseover', function() {
//document.body.style.cursor = 'pointer';
lines[1].hide();
layer.draw();;
});
layer.add(lines[0]);
layer.add(lines[1]);
http://jsfiddle.net/uNak5/1/
I updated the code, you had the reference to your array item set to
lines[a]
rather that
lines[0]
in your listener
.on('mouseover', function());