how to use draggable and double click together in kineticjs? - javascript

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

Related

How to debug a Konva stage not responding to click event

I have a Konva stage defined as the following code describes, and the stage is not responding to click, even though it is responding to drag and is automatically dragged.
Is there a way to debug the click problem??
The stage has a layer over it with some objects which don't fully cover it.
this.stage = new Konva.Stage({
container: divName,
width: this.width,
height: this.height,
draggable: true
});
this.stage.on("click mousedown", function() {
console.log("click");
});
this.stage.on("dragstart", function() {
console.log("dragstart");
});
this.nodeLayer = new Konva.Layer();
this.stage.add(this.nodeLayer);
The snippet below is built from your code. Click seems to work in this simple example. Could you post more of your code ?
var divName = 'container1';
var width = 300;
var height = 200;
this.stage = new Konva.Stage({
container: divName,
width: width,
height: height,
draggable: true
});
this.stage.on("click mousedown", function() {
console.log("click - stage");
});
this.stage.on("dragstart", function() {
console.log("dragstart - stage");
});
this.nodeLayer = new Konva.Layer();
this.nodeLayer.on("click mousedown", function() {
console.log("click - layer");
});
this.nodeLayer.on("dragstart", function() {
console.log("dragstart - layer");
});
this.stage.add(this.nodeLayer);
var layer = nodeLayer;
$('#addshape').on('click', function(){
var rect = new Konva.Rect({ x: 10, y: 10, width: 50, height: 50, fill: 'cyan'});
layer.add(rect)
layer.draw();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<p>Click the canvas first - note the 'click - stage' event fires but no 'click - layer'. Now add a shape and click it - note the layer click occurs before the stage click.</p>
<button style='position: absolute; z-index: 10;' id='addshape'>Add shape</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>

Click Event on a Shape doesn't work in kineticjs

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>

Events are lost after moving layer from within a "dragmove" callback

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

Create dynamic rectangle/box using easelJs or KineticJs

Hi I am looking to make a floor plan editor (something like MsPaint) using JavaScript. I have shortlisted EaselJS or KinetiJS as my preferred libraries.
I would like to know how to create a dynamic rectangular box/line with these libraries. I intend to draw a rectangle by clicking the mouse and dragging it (while the mouse button remains pressed). Thus the size of the rectangle will depend on how far the mouse is dragged.
Any help will be appreciated. If anyone feels that any other library like fabrisJs or paperJs will be better alternative then I am open to solutions in these libraries as well.
Ok... by trial and error and lots of googling and reusing net code I got the answer for KineticJs.
Heres the complete solution:
http://jsfiddle.net/sandeepy02/8kGVD/
<html>
<head>
<script>
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
layer.add(background);
stage.add(layer);
moving = false;
stage.on("mousedown", function(){
if (moving){
moving = false;layer.draw();
} else {
var mousePos = stage.getMousePosition();
rect= new Kinetic.Rect({
x: 22,
y: 7,
width: 0,
height: 0,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
//start point and end point are the same
rect.setX(mousePos.x);
rect.setY(mousePos.y);
rect.setWidth(0);
rect.setHeight(0);
moving = true;
layer.drawScene();
}
});
stage.on("mousemove", function(){
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
rect.setWidth(mousePos.x-rect.getX());
rect.setHeight(mousePos.y-rect.getY());
moving = true;
layer.drawScene();
}
});
stage.on("mouseup", function(){
moving = false;
});
};
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>
​

HTML5 Canvas: how to have an image and a shape on the canvas and shape is Drag n Droppable?

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

Categories

Resources