We Keep Coding

konva js trying to pass circle attribute variables into a function

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
}

jCanvas - background image disappears

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();
});

Making custom input range in canvas using KonvaJs

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>

adding an editable text layer to a canvas using kineticjs

I am having some trouble in adding text from an input box into my canvas, I have successfully added another layer, however my text doesn't seem to add to the canvas and I am baffled as to why not.
I have included a JSfiddle link,
Any help would be greatly appreciated,
Melissa
$("#addbutton").click(function () {
// simple label
var label = new Kinetic.Label({
x: 20,
y: 20,
draggable: true
});
label.add(new Kinetic.Tag({
fill: 'green'
}));
label.add(new Kinetic.Text({
text: $("#newtext").val(),
fontFamily: 'Verdana',
fontSize: 18,
padding: 10,
fill: 'white'
}));
textLayer.add(label);
textLayer.draw();
});

kineticjs mouse event does not listen when I use an array

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());