I use KineticJS add images to layers. I need to know which layer clicked.
This is jsfiddle: http://jsfiddle.net/yvp79ryf/1/
If i clicked first image just need get alert clicked is first layers otherwise second layer
HTML
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script defer="defer">
JavaScript
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: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
layer.add(yoda);
stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
var layer2 = new Kinetic.Layer();
var imageObj2 = new Image();
imageObj2.onload = function() {
var filteredYoda = new Kinetic.Image({
x: 280,
y: stage.getHeight() / 2 - 59,
image: imageObj2,
width: 106,
height: 118
});
layer2.add(filteredYoda);
stage.add(layer2);
};
imageObj2.src = 'http://demo-stable-ofbiz.apache.org/images/products/GZ-1000/small.png';
You need to set id to layers to identify them.
var layer = new Kinetic.Layer({id:1});
var layer2 = new Kinetic.Layer({id:2});
Add click event handler on stage
stage.on('click', function(e) {
if(e.targetNode.parent.attrs.id == 1){
alert('first layer');
}else{
alert('second layer');
}
});
You can check layer id through the descendants
e is MouseEvent object.
e.targetNode is Kinetic.Image
e.targetNode.parent is Kinetic.Layer
e.targetNode.parent.attrs.id is id of Kinetic.Layer
If you click on an image, you can use .getLayer() to get a reference to the layer that your clicked image is on.
stage.on('click', function(e) {
console.log('layer:',e.target.getLayer().id());
});
KineticJS does not listen for clicks on the empty part of a layer. Therefore, if you click on an empty part of the stage then you cannot tell which layer was clicked. But since since layer2 is above layer then if you click on the empty part of the stage then you're always clicking on the top layer (layer2).
Related
I am adding a konvajs image object on each double click on stage as shown below. How can I add an event listener to konvajs image objects created this way, is there a equivalent of the standard javascript addEventListener in konvajs?
stage.on('dblclick', function(e) {
//getString tell what shape to draw.
if (getString == "real-input") {
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Konva.Image({
x: Number(stage.getPointerPosition().x),
y: Number(stage.getPointerPosition().y),
image: imageObj,
width: this.width,
height: this.height,
name: "image",
draggable: true
});
// add the shape to the layer
layer.add(yoda).draw();
// add the layer to the stage
};
imageObj.src = document.getElementById("customImage").src;
}
}
});
You can do it, exactly as you did with stage node:
var yoda = new Konva.Image({
x: Number(stage.getPointerPosition().x),
y: Number(stage.getPointerPosition().y),
image: imageObj,
width: this.width,
height: this.height,
name: "image",
draggable: true
});
yoda.on('click', () => {
console.log('clicked');
})
I have add image function :
$("ul#img a").click(function(){
addProduct( $('img', this) );
});
function addProduct( imgObj ){
var layer = new Kinetic.Layer();
var imageObj = new Image(); //createimage
imageObj.onload = function() {
var image = new Kinetic.Image({
x: stage.getWidth() / 2 - 53,
y: stage.getHeight() / 2 - 59,
image: imageObj,
draggable: true,
name: "image"
});
// add the shape to the layer
layer.add(image);
// add the layer to the stage
stage.add(layer);
=========== End function add Image to canvas ============
image.on("mouseover", function(){
var imagelayer = this.getLayer();
document.body.style.cursor = "move";
this.setStrokeWidth(2);
this.setStroke("white"); //It's border of image when hover
layer.draw();
writeMessage(messageLayer, "Delete it");}); //DeleteItem
image.on("mouseout", function(){
var imagelayer = this.getLayer();
document.body.style.cursor = "default";
this.setStrokeWidth(0);
this.setStroke("transparent");
layer.draw();
writeMessage(messageLayer, "");});
image.on("dblclick dbltap", function(){
layer.remove(image);
layer.clear();
layer.draw();});};
imageObj.src = imgObj.attr('src'); }
=========== End Event of Image ============
This code can add image to canvas ,can dragable but cant resizable
How to make this image can resizable?
Please explain to me please
Thank you so much.
Kinetic elements do not have a built-in way to let the user resize.
Here's code to let the user drag the right edge of the image to resize the image:
Listen for mousedown, mouseup and mousemove
If mousedown occurs on the right edge of the image, save that mouse x,y,
On each mousemove, scale the image by the aspect ratio created by the distance the mouse has moved.
Example code to get you started:
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var kImage;
var startRight=-1;
var startWidth=0;
var startHeight=0;
var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
function start(){
kImage = new Kinetic.Image({
image:img,
x:10,
y:10,
width:img.width,
height:img.height,
});
layer.add(kImage);
layer.draw();
}
$(stage.getContent()).on('mousedown', function (event) {
var pos=stage.getPointerPosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
var ipos=kImage.position();
var isize=kImage.getSize();
var right=ipos.x+isize.width;
if(mouseX>right-10 && mouseX<right+10){
startRight=mouseX;
startWidth=isize.width;
startHeight=isize.height;
}
});
$(stage.getContent()).on('mouseup', function (event) {
startRight=-1;
});
$(stage.getContent()).on('mousemove', function (event) {
if(startRight>=0){
var pos=stage.getPointerPosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
var dx=mouseX-startRight;
var scaleFactor=(mouseX-(startRight-startWidth))/startWidth;
kImage.width(startWidth*scaleFactor);
kImage.height(startHeight*scaleFactor);
layer.draw();
}
});
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
<h4>Drag the right border of the image to resize<br>it while maintaining aspect ratio.</h4>
<div id="container"></div>
I want to drop the star on a tree and detect which tree the star has been dropped on so I can highlight and select it eventually. But I couldn't get more than just moving the star.
I chose for kineticjs because it works with touchscreen so I don't want to use something else if possible. (unless it works with both touchscreen and mouse too)
This is my javascript:
<script defer="defer">
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "star",
width: 900,
height: 500
});
var layer = new Kinetic.Layer();
// star
var star = new Kinetic.Image({
image: imageObj,
x: 376,
y: 30,
width: 40,
height: 46,
draggable: true,
draw: false
});
// add cursor styling
star.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
star.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(star);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'http://upload.wikimedia.org/wikipedia/commons/d/df/Star_icon_1.png';
</script>
Please see the fiddle for the full code:
http://jsfiddle.net/hpq7rpnh/1/
Add the trees as their own objects, and then you can check collision between stars and trees:
var starLayer = new Kinetic.Layer(); // its own layer, index should be above tree layer
var treeLayer = new Kinetic.Layer(); // its own layer
stage.add(treeLayer);
stage.add(starLayer);
var tree = new Kinetic.Rectangle( ... );
treeLayer.add(tree);
var tree2 = new Kinetic.Rectangle( ... ); // another tree at another coordinate
treeLayer.add(tree2); // assuming you have a layer for Trees ONLY already
later on, when the user drops the star, you need to check collision
// sample bounding box collision detection
function checkCollision(){
var trees = treeLayer.getChildren(); // gets all the trees
for(tree in trees)
if(star.xCoord > tree.xCoord && star.xCoord + star.width < tree.xCoord + tree.width ... same for y coordinates)
}
I have a KineticJS Stage with one layer. Here is a demo: http://jsfiddle.net/confile/7QTmz/
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
});
// add the shape to the layer
layer.add(yoda);
// add the layer to the stage
stage.add(layer);
stage.size({
width: 100,
height: 200
});
layer.draw();
stage.draw();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
How can I resize the stage such that stage.toDataUrl() will return an image with the new dimensions?
You can 2X the stage and its content like this (also...thanks to #Greg for info on stage.size):
var scaleFactor=2;
stage.size({width:stage.width()*scaleFactor,height:stage.height()*scaleFactor});
stage.scaleX(scaleFactor);
stage.scaleY(scaleFactor);
stage.draw();
I'm creating a script with draggable images which change src when double clicked as : Draggable image event in Kinect
Earlier question was answered and works great though if I add another object which will also change src when double-clicked then nothing works.
What could be the problem?
You have to have a set of different image and click event. jsfiddle: http://jsfiddle.net/bighostkim/8BcXk/
var imageObj2 = new Image();
imageObj2.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
var yoda2 = new Kinetic.Image({
x: 300,
y: stage.getHeight() / 2 - 59,
width: 106,
height: 118,
image: imageObj2,
draggable: true
});
layer.add(yoda2);
var imgIndex2 = 0;
yoda2.on('click',function() {
imageObj2.src = images[ imgIndex2++ % 3 ];
layer.draw();
})