I want to print message when a click event on a shape is made.It doesn't fire at all and draggable also doesn't work.How can I make this work?Can anyone help?
JS Code
$(function(){
var stage = new Kinetic.Stage({
container: 'toolbar',
width: $("#gamebox").width(),
height: window.innerHeight * 0.9,
listening: true
});
var layer = new Kinetic.Layer();
stage.add(layer);
var line = new Kinetic.Shape({
drawFunc: function (canvas) {
console.log("shape");
var context = canvas.getContext();
context.beginPath();
context.moveTo(20,5);
context.quadraticCurveTo(10, 35, 20, 60);
context.moveTo(20,5);
context.quadraticCurveTo(30, 35, 20, 60);
canvas.stroke(this);
context.fillStyle = 'black';
context.fill();
},
strokeWidth: 2,
draggable: true
});
line.on('click', function() {
alert("click detected");
});
layer.add(line);
stage.add(layer);
});
HTML Code
<div id="toolbar">
</div>
<div id="gamebox">
</div>
In the more recent versions of KineticJS (5.0+ I think), a wrapped context is fed into drawFunc.
Note that this wrapped context is a subset of the canvas context and does not have all the canvas context methods. For example, compositing is not available.
Here's a working example of your code using KineticJS 5.1.0:
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var line=new Kinetic.Shape({
x:0,
y:0,
stroke:"blue",
fill: 'red',
drawFunc: function(context) {
context.beginPath();
context.moveTo(20,5);
context.quadraticCurveTo(10, 35, 20, 60);
context.moveTo(20,5);
context.quadraticCurveTo(30, 35, 20, 60);
context.fillStrokeShape(this);
}
});
layer.add(line);
line.on('click', function() {
alert("click detected");
});
layer.draw();
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<h4>Click the shape.</h4>
<div id="container"></div>
Related
I'm completely new in HTML and kineticjs and I want to create an animation, which rotates an image around a certain point and by a certain angle. Then it has to stop.
Later I want to implement a way to control the angle by clicking a button. But to the first problem: This is the code so far:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js"> </script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118,
//offset: [x:250, y: 100]
});
/*var imageObj2 = new Image();
imageObj.onload = function() {
var background = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118,
}); */
// add the shape to the layer
layer.add(yoda);
//layer.add(background)
// add the layer to the stage
stage.add(layer);
var angularSpeed = 360 / 4;
var anim = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
yoda.rotate(angleDiff);
}, layer);
anim.start();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
//other image source
</script>
</body>
</html>
Source: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/
So how can I make the animation stop after - say - 50°?
Thanks for your help!
You can use Tween:
var tweaktween = new Kinetic.Tween({
node : yoda,
rotation : 50,
duration: 1
});
tween.start();
demo: http://jsfiddle.net/lavrton/2DDtW/
I have a scrollbar that moves a layer, so the layer is moved while in the scrollbar's "dragmove" callback. This causes all bound events to be disconnected on the moved layer!
Please see this fiddle: http://jsfiddle.net/NY4QK/10/
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200,
});
var fixedLayer = new Kinetic.Layer();
stage.add(fixedLayer);
var old_x = 100;
var old_y = 100;
var scroller = new Kinetic.Circle({
x: old_x,
y: old_y,
radius: 10,
fill: '#00F',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
scroller.on('dragmove', function(event){
var pos = scroller.getAbsolutePosition();
layer.move(pos.x - old_x, pos.y - old_y);
old_x = pos.x;
old_y = pos.y;
layer.draw();
});
fixedLayer.add(scroller);
var layer = new Kinetic.Layer();
stage.add(layer);
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 50,
height: 50,
fill: '#0F0',
stroke: 'black',
strokeWidth: 4
});
rect.on('click', function(){
rect.remove();
layer.draw();
});
layer.add(rect);
layer.draw();
fixedLayer.draw();
Is this a bug or am I doing something wrong?
When you use a drag event, KineticJS create a temporary layer on top as a result of which your events where not getting registered after the dragmove.
Just add another handler for dragend like this:
scroller.on('dragend', function(event){
layer.moveToTop();
layer.draw();
});
And here is the updated fiddle.
For more details/explanation on the problem you faced, check this: https://github.com/ericdrowell/KineticJS/issues/219
how to use draggable and double click together in kineticjs?
when using draggable then double click will not work.
Here is my code to draw the image..
function draw(images) {
abcImg= new Kinetic.Rect({
x: 50,
y: 150,
width: 50,
height: 50,
fillPatternImage: images.abc,
name: "abc",
draggable: true
});
}
and here the code when double click..
layer.on('dblclick', function(evt) {
var shape = evt.shape;
name = shape.getName();
$( "#dialog-form" ).dialog( "open" );
});
I'm use kineticjs and jquery.. Thank you..
Here is how to listen for mouse/touch events on the empty areas of the stage.
To listen for mouse/touch events on the stage (any non-object area), you need to add a new layer containing a rectangle that fills the stage. Then you can handle mouse/touch events on the empty stage areas: eventLayer.on(“dblclick”,function(e) {//do doubleclick stuff}
That layer code looks like this:
// Create a layer that will listen for mouse/touch events
var eventLayer = new Kinetic.Layer();
eventLayer.add(new Kinetic.Rect({
x:0,
y:0,
width:400,
height:300
}));
stage.add(eventLayer);
// TEST--listen for "dblclick"
eventLayer.on('dblclick', function(evt) {
alert("2click");
});
Here is the full code and a Fiddle: http://jsfiddle.net/m1erickson/gNMRq/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.2-beta.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 300
});
var layer = new Kinetic.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;
var box = new Kinetic.Rect({
x: rectX,
y: rectY,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
// add cursor styling
box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
document.body.style.cursor = 'default';
});
// Create a layer that will listen for mouse/touch events
var eventLayer = new Kinetic.Layer();
eventLayer.add(new Kinetic.Rect({
x:0,
y:0,
width:400,
height:300
}));
stage.add(eventLayer);
// TEST--listen for "dblclick"
eventLayer.on('dblclick', function(evt) {
alert("2click");
});
layer.add(box);
stage.add(layer);
</script>
</body>
</html>
it is working fine. Take a look at this, it's using draggable and dblclick, and both works fine.
http://jsbin.com/oruhif/1/edit
I have little issue here (i obviously miss something). I simplified it from my bigger application:
When i click blue rectangle, i add another layer to the stage that includes red rectangle (clickable), when i click this red rectangle, it removes second layer with red rect.
Problem: When i click blue rect second time, nothing happens :( i.e. app works only once, and i need to add/remove second layer(with red rect) repeatedly. What's wrong? :)
You can see it here, Fiddle http://jsfiddle.net/mAX8r/
Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js">
</script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layerBlue = new Kinetic.Layer();
var layerRed = new Kinetic.Layer();
var rectBlue = new Kinetic.Rect({
x: 100,
y: 75,
width: 100,
height: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
var rectRed = new Kinetic.Rect({
x: 300,
y: 75,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
// mouse events
rectBlue.on('click', function() {
stage.add(layerRed);
stage.draw();
});
rectRed.on('click', function() {
layerRed.remove();
stage.draw();
});
// add the shape to the layer
layerBlue.add(rectBlue);
layerRed.add(rectRed);
// add the layer to the stage
stage.add(layerBlue);
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
To hide and show a shape, we can the hide() and show() methods. Try this JSFIDDLE http://jsfiddle.net/mAX8r/5/. and You can see the sample code below
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
<script>
var layerBlue;
var layerRed;
var rectBlue;
var rectRed;
window.onload = function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
layerBlue = new Kinetic.Layer();
layerRed = new Kinetic.Layer();
rectBlue = new Kinetic.Rect({
x: 100,
y: 75,
width: 100,
height: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
rectRed = new Kinetic.Rect({
x: 300,
y: 75,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
// mouse events
rectBlue.on('click', function() {
rectRed.show();
stage.draw();
});
rectRed.on('click', function() {
rectRed.hide();
stage.draw();
});
// add the shape to the layer
layerBlue.add(rectBlue);
layerRed.add(rectRed);
// add the layer to the stage
stage.add(layerBlue);
stage.add(layerRed);
rectRed.hide();
stage.draw();
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Refer this url http://www.html5canvastutorials.com/kineticjs/html5-canvas-hide-and-show-shape-with-kineticjs/ for HTML5 Canvas Hide and Show a Shape
I'm having trouble creating an HTML5 canvas in which a an image is present, a shape is present, and the shape is draggable on the same stage. My gut tells me that I need to create multiple layers or multiple stages/canvases. Then have one be regular and the other be Kinetic. I've found some code for draggable shapes, code for displaying images and shapes, and I think my problem only lies in the implementation of the syntax. Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200
var layer = new Kinetic.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;
var box = new Kinetic.Rect({
x: rectX,
y: rectY,
width: 100,
height: 50,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4,
draggable: true
});
var layer1 = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var image = new Kinetic.Image({
x: stage.getWidth() / 2 - 53,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
layer1.add(image);
stage.add(layer1);
// add cursor styling
box.on("mouseover", function() {
document.body.style.cursor = "pointer";
});
box.on("mouseout", function() {
document.body.style.cursor = "default";
});
layer.add(box);
stage.add(layer);
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
};
</script>
</head>
<body onmousedown="return false;">
<div id="container"></div>
</body>
</html>
Try this website: w3shools.com/html5/html5_draganddrop.asp