In jsfiddle.net/LuZbV/23/ i want, when dragging the image within the container i want to print a copy of image at perticular x,y coordinate and previous drawn image should be erase how can i do this?please help me...
JS Code
$(function(){
var $house=$("#house");
$house.hide();
var $stageContainer=$("#container");
var stageOffset=$stageContainer.offset();
var offsetX=stageOffset.left;
var offsetY=stageOffset.top;
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var image1=new Image();
image1.onload=function(){
$house.show();
}
image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157";
// make the toolbar image draggable
$house.draggable({
helper:'clone',
});
$house.data("url","house.png"); // key-value pair
$house.data("width","32"); // key-value pair
$house.data("height","33"); // key-value pair
$house.data("image",image1); // key-value pair
$stageContainer.droppable({
drop:dragDrop,
});
function dragDrop(e,ui){
var x=parseInt(ui.offset.left-offsetX);
var y=parseInt(ui.offset.top-offsetY);
var element=ui.draggable;
var data=element.data("url");
var theImage=element.data("image");
var image = new Kinetic.Image({
name:data,
x:x,
y:y,
image:theImage,
draggable: true,
dragBoundFunc: function(pos) {
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
image.on("dragend", function() {
var points = image.getPosition();
//alert(points.x + ',' + points.y);
var image1 = new Kinetic.Image({
name: data,
id: "imageantry",
x: points.x+65,
y: points.y,
image: theImage,
draggable: false
});
layer.add(image1);
layer.draw();
});
image.on('dblclick', function() {
image.remove();
layer.draw();
});
layer.add(image);
layer.draw();
}
}); // end $(function(){});
HTML Code
<div id="toolbar">
<img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br>
</div>
<div id="container"></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"> </script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
#toolbar{
width:350px;
height:35px;
border:solid 1px blue;
}
</style>
<script>
$(function(){
var $house=$("#house");
$house.hide();
var $stageContainer=$("#container");
var stageOffset=$stageContainer.offset();
var offsetX=stageOffset.left;
var offsetY=stageOffset.top;
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var image1=new Image();
image1.onload=function(){
$house.show();
}
image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157";
$house.draggable({
helper:'clone',
});
$house.data("url","house.png"); // key-value pair
$house.data("width","32"); // key-value pair
$house.data("height","33"); // key-value pair
$house.data("image",image1); // key-value pair
$stageContainer.droppable({
drop:dragDrop,
});
function dragDrop(e,ui){
var x=parseInt(ui.offset.left-offsetX);
var y=parseInt(ui.offset.top-offsetY);
var element=ui.draggable;
var data=element.data("url");
var theImage=element.data("image");
var image = new Kinetic.Image({
name:data,
x:x,
y:y,
image:theImage,
draggable: true,
dragBoundFunc: function(pos) {
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
//get image position.
var w=0;
var obj;
image.on("dragend", function(e) {
w=w+1;
var points = image.getPosition();
if(w>1){
obj = stage.get('#imageantry')
obj.remove();
}
var image2 = new Kinetic.Image({
name: data,
id: "imageantry",
x: points.x+75,
y: points.y,
image: theImage,
draggable: false
});
layer.add(image2);
layer.draw();
});
image.on('dblclick', function() {
image.remove();
layer.draw();
});
layer.add(image);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="toolbar">
<img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br>
</div>
<div id="container"></div>
</body>
</html>
Related
I follow the Documentation that Konva have.
https://konvajs.github.io/docs/select_and_transform/Basic_demo.html
and
https://konvajs.github.io/docs/sandbox/Image_Resize.html
But the problem is they only have transform demo for rectangle shape. My plan is to have it on image. But so far I cant get it right. Here's my example code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/konvajs/konva/master/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Image Resize Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body class="col-md-12">
<div id="container" class="col-md-10">
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
function testFunction() {
addCanvas();
}
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var image = group.get('Image')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
image.position(topLeft.position());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
image.width(width);
image.height(height);
}
}
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
// darth vader
var darthVaderImg = new Konva.Image({
width: 200,
height: 137,
name: 'imgs'
});
// yoda
var yodaImg = new Konva.Image({
width: 93,
height: 104,
name: 'imgs'
});
var darthVaderGroup = new Konva.Group({
x: 180,
y: 50,
draggable: true,
id: 'test1',
name: 'Imgs'
});
var num = 0;
function addCanvas() {
var test = new Konva.Group({
x: 200,
y: 100,
draggable: true
});
var testImg = new Konva.Image({
width: 93,
height: 104
});
layer.add(test);
test.add(testImg);
console.log('test');
var imageObjs = new Image();
imageObjs.onload = function() {
testImg.image(imageObjs);
layer.draw();
};
imageObjs.src = './pic/test2.png';
}
layer.add(darthVaderGroup);
darthVaderGroup.add(darthVaderImg);
var yodaGroup = new Konva.Group({
x: 20,
y: 110,
draggable: true,
id: 'Imgs',
});
layer.add(yodaGroup);
yodaGroup.add(yodaImg);
var imageObj1 = new Image();
imageObj1.onload = function() {
darthVaderImg.image(imageObj1);
layer.draw();
};
imageObj1.src = './pic/test2.png';
var imageObj2 = new Image();
imageObj2.onload = function() {
yodaImg.image(imageObj2);
layer.draw();
};
imageObj2.src = './pic/test1.jpg';
stage.on('click', function(e) {
if (e.target === stage) {
stage.find('Transformer').destroy();
layer.draw();
return;
}
// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('imgs')) {
return;
}
// remove old transformers
// TODO: we can skip it if current rect is already selected
stage.find('Transformer').destroy();
// create new transformer
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(e.target);
layer.draw();
});
function addTrans(e) {
}
</script>
</body>
</html>
The output
Here's the output. Whenever I click the image the transform will be out of place and will on stay in 1 place.
I finally figure it out. Turn out I place the draggable in the wrong place. I put the draggable into the Konva.Image instead in the group.
Thanks
Disclaimer: it may be considered this post is a duplicate of this post but I have demonstrated my need specifically.
I have a case in my KonvaJS application where I need to propagate a click event from the Rectangle shape (that is a child of the Upper Layer) to several images that are added to the Lower Layer.
Please note that I have in the Lower layer more than 50 objects between images and shapes, so how can I now what is the target object in the Lower Layer.
Kindly here is an example to demonstrate my need:
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var lowerLayer = new Konva.Layer();
var upperLayer = new Konva.Layer();
//lion
var lionImage = new Image();
lionImage.onload = function() {
var lion = new Konva.Image({
x: 50,
y: 50,
image: lionImage,
width: 106,
height: 118
});
// add the shape to the layer
lowerLayer.add(lion);
stage.draw();
lion.on("click", function() {
alert("you clicked the lion");
});
};
lionImage.src = 'http://konvajs.github.io/assets/lion.png';
//monkey
var monkeyImage = new Image();
monkeyImage.onload = function() {
var monkey = new Konva.Image({
x: 200,
y: 50,
image: monkeyImage,
width: 106,
height: 118
});
// add the shape to the layer
lowerLayer.add(monkey);
stage.draw();
monkey.on("click", function() {
alert("you clicked the monkey");
});
};
monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png';
var upperTransparentBox = new Konva.Rect({
x: 0,
y: 0,
height: stage.height(),
width: stage.width(),
fill: 'transparent',
draggable: false,
name: 'upperTransparentBox'
});
upperTransparentBox.on("click", function() {
alert("you clicked the upper Transparent Box");
});
upperLayer.add(upperTransparentBox);
// add the layer to the stage
stage.add(lowerLayer);
stage.add(upperLayer);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
Technically it is possible to manually trigger click event on any node.
But I think it is an antipattern. You can just find an intersection with 'getIntersection()' function and do what you need with a node.
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var lowerLayer = new Konva.Layer();
var upperLayer = new Konva.Layer();
//lion
var lionImage = new Image();
lionImage.onload = function() {
var lion = new Konva.Image({
x: 50,
y: 50,
name: 'lion',
image: lionImage,
width: 106,
height: 118
});
// add the shape to the layer
lowerLayer.add(lion);
stage.draw();
lion.on("click", function() {
alert("you clicked the lion");
});
};
lionImage.src = 'http://konvajs.github.io/assets/lion.png';
//monkey
var monkeyImage = new Image();
monkeyImage.onload = function() {
var monkey = new Konva.Image({
x: 200,
y: 50,
name: 'monkey',
image: monkeyImage,
width: 106,
height: 118
});
// add the shape to the layer
lowerLayer.add(monkey);
stage.draw();
monkey.on("click", function() {
alert("you clicked the monkey");
});
};
monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png';
var upperTransparentBox = new Konva.Rect({
x: 0,
y: 0,
height: stage.height(),
width: stage.width(),
fill: 'transparent',
draggable: false,
name: 'upperTransparentBox'
});
upperTransparentBox.on("click", function() {
var target = lowerLayer.getIntersection(stage.getPointerPosition());
if (target) {
alert('clicked on ' + target.name());
}
});
upperLayer.add(upperTransparentBox);
// add the layer to the stage
stage.add(lowerLayer);
stage.add(upperLayer);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
I have multiple images in Kineticjs stage. I have to get the properties of the image (x, y, height, width) on clicking on the image.
Here's an example of how to have a Kinetic.Image report it's XY when clicked.
preload all your images first
attach the click event to each new Kinetic.Image
Example code and a Demo: http://jsfiddle.net/m1erickson/58a89/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// first fully load all images into imgs[]
// then call start() when all are loaded
var imageURLs=[]; // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg");
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
for(var i=0;i<imgs.length;i++){
addImage(imgs[i],i*60,10,50,50);
}
}
function addImage(img,x,y,w,h){
var image=new Kinetic.Image({
x:x,
y:y,
width:w,
height:h,
image:img,
draggable:true
});
image.on("click",function(){
var pos=this.position();
alert(parseInt(pos.x)+","+parseInt(pos.y));
});
layer.add(image);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag to new position. Click to get XY.</h4>
<div id="container"></div>
</body>
</html>
When you load the images, bind a click event :
imageObj.onload = function(){
var currentImg = new Kinetic.Image({
// define x,y,W and H
});
currentImg.on("click", function(e) {
//x position for example
console.log(currentImg.getPosition().x);
});
}
Im just trying to have the image tween slowly to the left. As far as I can tell, the code is correct. The image loads, but there is no motion.
var stage = new Kinetic.Stage({
container: 'container',
width: 1920,
height: 1080
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var space = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 1920,
height: 1080
});
// add the shape to the layer
layer.add(space);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = 'http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png';
var tween = new Kinetic.Tween({
node: space,
duration: 20,
x: -1920,
y: 0,
});
setTimeout(function() {
tween.play();
}, 2000);
A few scoping problems with the code:
Make sure your space and tween variables are in scope (currently hidden in .onload)
Since the image will take time to load, you should start the tween in imageObj.onload
Here's code and a Demo: http://jsfiddle.net/m1erickson/JT2cD/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:500px;
height:500px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
stage.add(layer);
var space;
var tween;
var imageObj = new Image();
imageObj.onload = function() {
space = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 1920/4,
height: 1080/4
});
// add the shape to the layer
layer.add(space);
// add the layer to the stage
stage.add(layer);
tween = new Kinetic.Tween({
node: space,
duration: 20,
x: -1920/4,
y: 0,
});
setTimeout(function(){ tween.play(); }, 2000);
};
imageObj.src = 'http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png';
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I'm trying to create a html5 canvas painting application using kinetic.js where users can select various shapes and draw them on canvas .
When a user selects circle and tries to draw it , the radius of circle should depend on the distance the mouse has covered on the canvas , now the problem is when the radius of circle increase it works fine but when I decrease it the circle remain of same size .
It would be great if someone can point me to the right direction .
Here is the link to fiddle . http://jsfiddle.net/45fEn/
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="container"></div>
<script src="kinetic.js"></script>
<script src="js/jquery.js"></script>
<script defer="defer">
$(document).ready(function() {
var stage = new Kinetic.Stage({
container:'container',
width:300,
height:400
});
var layer = new Kinetic.Layer();
function drawCircle() {
var circle = new Kinetic.Circle({
x:initialX, y:initialY , radius:tangant , fill:'green'
});
layer.add(circle) ;
stage.add(layer);
}
stage.add(layer);
var painting =false , clicking = false ;
var initialX , initialY , finalX , finalY , tangant , newTangant ,storeTime;
$("canvas").mousedown(function(ev) {
initialX = ev.clientX;
initialY = ev.clientY;
painting = true;
clicking = true;
});
$("canvas").mousemove(function(ev) {
finalX = ev.clientX ;
finalY = ev.clientY ;
var diffX = initialX - finalX ;
var diffY = initialY - finalY ;
tangant = Math.sqrt ( Math.pow(diffX,2) + Math.pow(diffY,2) ) ;
console.log(tangant);
storeTime = setTimeout(function() { newTangant = tangant },200) ;
if(newTangant < tangant) { console.log("new tan:"+newTangant);
circle.remove();
drawCircle();
}
if(clicking == true) {
drawCircle();
}
});
$("canvas").mouseup(function(ev) {
painting = false;
clicking = false;
});
});
</script>
</body>
</html>
You’re close!
BTW, you can also use stage.getContent to hook into stage mouse events.
stage.getContent()).on('mousedown', function (event) { …do mousedown stuff… }
Instead of removing and recreating the circle...
...just use circle.setRadius(newRadius) to resize the existing circle.
$(stage.getContent()).on('mousemove', function (event) {
if(!isDragging){return;}
var pos=stage.getMousePosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
var dx=mouseX-initialX;
var dy=mouseY-initialY;
var r=Math.sqrt(dx*dx+dy*dy);
// this will resize the circle that is currently being created/resized
draggedCircle.setRadius(r);
layer.draw();
});
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/KLcRc/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:400px;
height:400px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
var draggedCircle,initialX,initialY;
var radius=25;
var isDragging=false;
function newCircle(mouseX,mouseY){
initialX=mouseX;
initialY=mouseY;
var circle = new Kinetic.Circle({
x:initialX,
y:initialY ,
radius:1,
fill:'green'
});
layer.add(circle) ;
layer.draw();
return(circle);
}
$(stage.getContent()).on('mousedown', function (event) {
var pos=stage.getMousePosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
draggedCircle=newCircle(mouseX,mouseY);
isDragging=true;
});
$(stage.getContent()).on('mousemove', function (event) {
if(!isDragging){return;}
var pos=stage.getMousePosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
var dx=mouseX-initialX;
var dy=mouseY-initialY;
var r=Math.sqrt(dx*dx+dy*dy);
draggedCircle.setRadius(r);
layer.draw();
});
$(stage.getContent()).on('mouseup', function (event) {
isDragging=false;
});
}); // end $(function(){});
</script>
</head>
<body>
<p>Drag to create a resizable circle</p>
<div id="container"></div>
</body>
</html>