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>
Related
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
}
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 can create a stage and add shapes. However, if I use the Konva.Node.create command then the stage no longer displays newly added shapes.
In the code below, the first text 'Hello World !' is displayed, but the second text (after the Konva.Node.create) where it should display 'Hello World 2!' does not appear on the stage.
A working fiddle of this code is here.
Any help would be appreciated. Thanks
var stage = new Konva.Stage({
container : "container",
width : 400,
height : 300
});
var layer = new Konva.Layer();
stage.add(layer);
var text = new Konva.Text({
x: 10,
y: 48,
text:'Hello, World!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text);
layer.draw();
Konva.Node.create(stage, "container");
var text2 = new Konva.Text({
x: 40,
y: 48,
text:'Hello, World 2!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text2);
layer.draw();
Konva.Node.create overwrites the original stage in div container and creates a new copy. So your changes are not visible.
Probably you just need to remove that line.
It worked!
var stage = new Konva.Stage({
container : "container",
width : 400,
height : 300
});
var layer = new Konva.Layer();
stage.add(layer);
var text = new Konva.Text({
x: 10,
y: 48,
text:'Hello, World!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text);
layer.draw();
var stage = Konva.Node.create(stage, "container");
var layer = stage.getLayers()[0];
var text2 = new Konva.Text({
x: 40,
y: 48,
text:'Hello, World 2!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text2);
layer.draw();
im use this http://projects.calebevans.me/jcanvas/
and im have simple example
<input type="button" class="bt" value="draw"/><br>
<canvas id="picture" width=1350 height=1350></canvas>
and js
var canvas = document.getElementById("picture");
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "tank_usa.jpg";
img.onload = function(){
ctx.drawImage(img, 0, 0);
}
$(".bt").on("click",function(){
// Draw a resizable image
$('#picture').addLayer({
type: 'image',
draggable: true,
source: 'facesSmall.png',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
x: 180, y: 150,
width: 200, height: 125,
handle: {
type: 'arc',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
radius: 10
}
})
.drawLayer();
})
if im click on button bt,and hover canvas div, my background disappears
how i can do what new image draw over background
Your background gets erased because you are using ctx.drawImage, which does not create a jCanvas layer. jCanvas layers and non-layers cannot exist on the same canvas, because when jCanvas redraws the canvas (manually via drawLayers() or automatically when events are triggered), non-layers will be erased.
To fix this, simply draw "tank_usa.jpg" like you drew 'facesSmall.png': using addLayer with type: 'image' set.
$('#picture').addLayer({
type: 'image',
source: 'tank_usa.jpg',
x: 0, y: 0,
fromCenter: false
});
$(".bt").on("click",function(){
// Draw a resizable image
$('#picture').addLayer({
type: 'image',
draggable: true,
source: 'facesSmall.png',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
x: 180, y: 150,
width: 200, height: 125,
handle: {
type: 'arc',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
radius: 10
}
})
.drawLayer();
});
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);