I'm trying to rotate and animate my multiple image layers seperatly ontop of each other. The problem is when I call the animate rotate function on one of the images, my debugger says the image has no function rotate. Here is what I have got
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer1 = new Kinetic.Layer();
var layer2 = new Kinetic.Layer();
var layer3 = new Kinetic.Layer();
var layer4 = new Kinetic.Layer();
var logo4 = new Image();
var logo3 = new Image();
var logo2 = new Image();
var logo1 = new Image();
var logoRing, logoCross, logoCentreRings, logoCentre;
var loadCount = 0;
logo4.onload = function() {
loadCount ++;
if(loadCount == 4&& !loaded){
loaded = true;
putOnStage();
}
};
logo3.onload = function() {
loadCount ++;
if(loadCount == 4&& !loaded){
loaded = true;
putOnStage();
}
};
logo2.onload = function() {
loadCount ++;
if(loadCount == 4&& !loaded){
loaded = true;
putOnStage();
}
};
logo1.onload = function() {
loadCount ++;
if(loadCount == 4 && !loaded){
loaded = true;
putOnStage();
}
};
var loaded = false;
logo4.src = "logo_ring.png";
logo3.src = "logo_cross.png";
logo2.src = "logo_centre_rings.png";
logo1.src = "logo_centre.png";
var logoPosX = 0;
var logoPosY = 0;
var logoWidth = 300;
var logoHeight = 300;
function putOnStage(){
logoRing = new Kinetic.Image({
x: 0,
y: 0,
image: logo4,
width: logoWidth,
height: logoHeight
});
layer4.add(logoRing);
stage.add(layer4);
logoCross = new Kinetic.Image({
x: 0,
y: 0,
image: logo3,
width: logoWidth,
height: logoHeight
});
layer3.add(logoCross);
stage.add(layer3);
logoCentreRings = new Kinetic.Image({
x: 0,
y: 0,
image: logo2,
width: logoWidth,
height: logoHeight
});
layer2.add(logoCentreRings);
stage.add(layer2);
logoCentre = new Kinetic.Image({
x: 0,
y: 0,
image: logo1,
width: logoWidth,
height: logoHeight
});
layer1.add(logoCentre);
stage.add(layer1);
}
var angularSpeed = 360 / 4;
var rotateCentreRings = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
logoCross.rotate(angleDiff);
}, layer2);
rotateCentreRings.start();
Which version of KineticJS are you using? Latest version deprecated rotateDeg in favour of simply making rotate use degrees instead of radians.
Additionally, you are creating and starting the animation before the images are loaded. This is why logoCross is undefined when you try to rotate it. Move that inside of putOnStage and it should work.
function putOnStage(){
logoRing = new Kinetic.Image({
x: 0,
y: 0,
image: logo4,
width: logoWidth,
height: logoHeight
});
layer4.add(logoRing);
stage.add(layer4);
logoCross = new Kinetic.Image({
x: 0,
y: 0,
image: logo3,
width: logoWidth,
height: logoHeight
});
layer3.add(logoCross);
stage.add(layer3);
logoCentreRings = new Kinetic.Image({
x: 0,
y: 0,
image: logo2,
width: logoWidth,
height: logoHeight
});
layer2.add(logoCentreRings);
stage.add(layer2);
logoCentre = new Kinetic.Image({
x: 0,
y: 0,
image: logo1,
width: logoWidth,
height: logoHeight
});
layer1.add(logoCentre);
stage.add(layer1);
var angularSpeed = 360 / 4;
var rotateCentreRings = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
logoCross.rotate(angleDiff);
}, layer2);
rotateCentreRings.start();
}
Related
Why next function can't find an image ( when i check with debugger i may see all other elements but not the image)
function getItemByName3(name) {
var object = null,
objects = canvas.getObjects();
objectsCount=canvas.getObjects().length;
for (var i = 0, len = objectsCount; i < len; i++) {
if (objects[i].type && objects[i].type == "image"){
if (objects[i].id && objects[i].id===name) {
object = objects[i];
break;
}
}
}
return object;
}
function backgroundSaveToJsonF(){ ////____________________________________________saveJsonF;
var backgroundImage=getItemByName3(document.getElementById("selectProject").value+"imageID");
var backgroundImageForDB=JSON.stringify(backgroundImage.toObject(['id','sendToBack','selectable']));
I am uploading image to canvas with next code:
document.getElementById('imgLoader').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 00,
width: canvas.width,
height: canvas.height,
id:document.getElementById("selectProject").value+"imageID"
});
canvas.setBackgroundImage(oImg).renderAll();
var dataURL = canvas.toDataURL({
format: 'png',
quality: 0.8
});
});
};
reader.readAsDataURL(file);
});
thank you
DEMO
document.getElementById('imgLoader').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 00,
width: canvas.width,
height: canvas.height
});
//canvas.setBackgroundImage(oImg).renderAll();
canvas.add(oImg);
console.log(canvas.getObjects());
var dataURL = canvas.toDataURL({
format: 'png',
quality: 0.8
});
});
};
reader.readAsDataURL(file);
});
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({
left: 50,
top: 50,
height: 100,
width:100,
stroke: 'red',
fill: ''
}))
canvas.add(new fabric.Text('1',{
left: 20,
top: 50,
stroke: 'red',
fill: ''
}))
canvas.renderAll();
canvas{
border:2px dotted blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<input type="file" id="imgLoader" accept="image/*"> <br>
<canvas id='c' width='400' height='400'></canvas>
Its because you are setting uploaded image as background image canvas.setBackgroundImage(oImg) you are not adding that as a object to canvas. If you want to get it in your object list then add as an object canvas.add(oImg). Check the demo.
I want to be able to run a certain function when my mouse is clicked on a certain area of the canvas but i do not understand how to do it. (I am new to programming) for example, if i wanted to click in within an area of a rectangle in the top right of the canvas, such as the coordinates of "172,58,269,166"
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas{
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
/*display:block;*/
}
</style>
</head>
<body background="MANCALA-start_bg_texture.jpg">
<div class="container">
<canvas id="myCanvas" width="1141" height="479" usemap="Canvas"></canvas>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// identifies what each of the pictures
var sources = {
background: 'MANCALA-game_bg_combined3.png',
pit1marble1: 'MANCALA-game_marble.png',
pit1marble2: 'MANCALA-game_marble.png',
pit1marble3: 'MANCALA-game_marble.png',
pit1marble4: 'MANCALA-game_marble.png',
pit1marble5: 'MANCALA-game_marble.png',
pit1marble6: 'MANCALA-game_marble.png',
};
//loading the images on the canvas
loadImages(sources, function(images) {
context.drawImage(images.background, 0, 0, 1141, 479);
context.drawImage(images.pit1marble1, 200, 70, 50, 50);
context.drawImage(images.pit1marble2, 160, 85, 50, 50);
context.drawImage(images.pit1marble3, 175, 75, 50, 50);
context.drawImage(images.pit1marble4, 190, 80, 50, 50);
context.drawImage(images.pit1marble5, 200, 100, 50, 50);
context.drawImage(images.pit1marble6, 160, 100, 50, 50);
//mouse positioning
document.getElementById("myCanvas").onclick = function() {pasDiKlik()};
function pasDiKlik() {
context.beginPath();
context.arc(event.clientX-10, event.clientY-10,10, 0, 2 * Math.PI, false);
You could add a eventlistener to the canvas, get the position of the mouse on the canvas, and perform a action based on that. for example:
var canvas = document.getElementById("MyCanvas")
var canvasLeft = canvas.offsetLeft,
var canvasTop = canvas.offsetTop
canvas.addEventListener("click", function(event){
var x = event.pageX - canvasLeft
var y = event.pageY - canvasTop;
};
The variables x and y are now the pixel position on the canvas.
for example, to check on your first box(top left:200px, 70px, bottom right: 250px, 120px).
if (x >= 200 && x <= 250 && y >= 70 && y <= 120) {
//perform action here
};
I'm using Konva JS in my project. I'm adding a shape on a button click which is draggable. On click of the shape i need to get X and Y positions of the shape. getX and getY functions are returning the original X and Y. How can I update the X and Y after dragging.
Example code below.
var stage = new Konva.Stage({
container: 'canvas', // id of container <div>
width: 500,
height:300
});
jQuery("#add-shape").click(function(){
addShape();
});
var addShape = function(){
console.log("add shape");
var layer = new Konva.Layer();
var parentContainer = new Konva.Rect({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
width: 200,
height: 60,
cornerRadius: 10,
fill: '#ccc'
});
var smallCircle = new Konva.Circle({
x: stage.getWidth() / 2 + 200,
y: stage.getHeight() / 2 + 30,
radius: 15,
fill: "#F2784B",
stroke: "white",
strokeWidth: 2
});
smallCircle.on('click', function() {
console.log(this.getX(),this.getY());
addArrow(this.getX(),this.getY());
//get current X and Y here instead of origina X and Y
});
layer.add(parentContainer);
layer.add(smallCircle);
layer.draggable('true');
stage.add(layer);
}
var addArrow = function(arrowX,arrowY){
var connectorLayer = new Konva.Layer();
var connector = new Konva.Arrow({
points: [arrowX,arrowY,arrowX+10,arrowY],
pointerLength: 4,
pointerWidth: 4,
fill: 'black',
stroke: 'black',
strokeWidth: 2
});
connectorLayer.add(connector);
stage.add(connectorLayer);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<button id="add-shape">
Add shape
</button>
<div id="canvas">
</div>
If you need to get a mouse position you can use:
smallCircle.on('click', function() {
console.log(stage.getPointerPosition());
});
box.on('mouseout', function () {
document.body.style.cursor = 'default';
console.log(box.attrs.x);
console.log(box.attrs.y);
});
I don't know if this is what you're looking for and it's too late but i'll post it anyway for future developers..
Lets say this is my watermark image inside the layer and bluh bluh and i want it's position getX() and getY(): I use the group like this:
First the regular stuff to add the image:
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);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Konva.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on('mouseover', function () {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function () {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
var stage = new Konva.Stage({
container: 'container',
width: 595,
height: 842
});
var layer = new Konva.Layer();
stage.add(layer);
//WaterMark
var WaterMarkImg = new Konva.Image({
width: 595,
height: 842
});
var WaterMarkGroup = new Konva.Group({
x: 0,
y: 0,
draggable: true
});
layer.add(WaterMarkGroup);
WaterMarkGroup.add(WaterMarkImg);
addAnchor(WaterMarkGroup, 0, 0, 'topLeft');
addAnchor(WaterMarkGroup, 595, 0, 'topRight');
addAnchor(WaterMarkGroup, 595, 842, 'bottomRight');
addAnchor(WaterMarkGroup, 0, 842, 'bottomLeft');
var imageObj1 = new Image();
imageObj1.onload = function () {
WaterMarkImg.image(imageObj1);
layer.draw();
};
imageObj1.src = "some image Url";
and this is simply the getX(): very simple
var x = WaterMarkGroup.getX();
alert(x);
I hope this helps anyone looking for it.
This is not the exact answer for the question. point is the draggable shape.
point.on('dragmove', (t) => {
console.log("dragmove", t.target.x(), t.target.y());
});
use shape.getAttr("x") and shape.getAttr("y"), following is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<div id="c"></div>
<script type="module">
import "../../node_modules/konva/konva.js"
var stage = new Konva.Stage({
container: "#c",
width: 500,
height: 500
})
var layer = new Konva.Layer()
stage.add(layer)
var c = (x, y) => {
return new Konva.Circle({
x: x,
y: y,
stroke: "lightblue",
strokeWidth: 2,
radius: 10,
draggable: true
})
}
let c1 = c(50, 50)
layer.add(c1)
var c2 = c(100, 50)
layer.add(c2)
c1.on("dragmove", () => {
c2.setAttr("y", c1.getAttr("y"))
})
layer.draw()
</script>
</body>
</html>
I were looking for a drawImage() alternative for fabric.js lib, so I've made a function:
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
return new fabric.Image(img, {
left: x,
top: y,
width: width,
height: height,
id: "rhino",
clipTo: function (ctx) {
ctx.rect(sx,sy,swidth,sheight);
}
});
}
var imgElement = new Image();
imgElement.onload = function() {
var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
canvas.add(imgInstance);
};
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
The result needs to be:
But I don't get nothing with my custom function. Where is the problem?
Codepen: http://codepen.io/anon/pen/RaxRqZ
I do not really know what you want to achieve, but using clipTo is not my advice, both for performance and complexity reasons.
Draw on a temp canvas the portion of image you need, then use this temp canvas a source for your fabricJS image.
var canvas = new fabric.Canvas('c');
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
var tmpc = document.createElement('canvas');
tmpc.width = swidth;
tmpc.height = sheight;
ctx = tmpc.getContext("2d");
ctx.drawImage(img,-sx,-sy);
return new fabric.Image(tmpc, {
left: x,
top: y,
width: width,
height: height,
id: "rhino"
});
}
var imgElement = new Image();
imgElement.onload = function() {
var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
canvas.add(imgInstance);
};
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="500", height="500"></canvas>
Here you can find solution,
var canvas = ctx = '';
canvas = new fabric.Canvas('canvas');
canvas.selection = false;
ctx = canvas.getContext('2d');
function drawImage(imgPath, x, y, width, height)
{
fabric.Image.fromURL(imgPath, function(img) {
img.set({
left: x,
top: y,
width: width,
height: height,
id: "rhino",
clipTo: function (ctx) {
ctx.rect(5,5,50,50);
}
});
canvas.add(img).renderAll().setActiveObject(img);
});
}
var imgElement = new Image();
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
imgElement.onload = function() {
drawImage(imgElement.src, 50, 50, 100, 100);
}
https://codepen.io/mullainathan/pen/wGpzvY
currently i am drawing an image on a html5 canvas onclicking upon that image. the code for drawing that image is given below :
This is the given script function :
<script>
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.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if(width && height) {
image.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function() {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on('mouseover', function() {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container_canvas',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var layer = new Kinetic.Layer();
layer.add(darthVaderGroup);
stage.add(layer);
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.darthVader,
width: 200,
height: 138,
name: 'image'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
}
function putDesign(designSrc)
{
designSrc = designSrc.split("images/");
var sources = {
darthVader: 'images/'+designSrc[1],
};
loadImages(sources, initStage);
}
</script>
and i am usinmg kinetic-v4.4.0.min.js (http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js) for this,
and in html i am just calling this function putDesign , so this code will draw a canvas in this iv.
<div class="behind" id="behind">
<div id="canvasProductImage" style="text-align:center; width:300px; height:300px; background:url(images/a.png) 100px 100px no-repeat;">
<div id="container_canvas"></div>
</div>
Now this code will make me to draw an image in a div. here the image 1(tshirt (background image of the div in which we will draw our canvas)) , and image 2 (the drawn element),
so the mai task is that how can i get the position of drwan image, means how will i know the position of the drawn image on the canvas in coordinates ? as the image object is resizable ansd draggable so i want the last positioned coordinates ? Thanks in advance i am very near to my objective, kindly help.
image first :
image second :
How to get draggable/resizable image information (X/Y/Width/Height)
This code will report your image info when you drag/resize it:
darthVaderGroup.on("dragend",function(){$("#info").text(getImageInfo());});
function getImageInfo(){
var image=darthVaderImg;
return(
" X/Y:"+
image.getAbsolutePosition().x+"/"+
image.getAbsolutePosition().y+" -- Width/Height:"+
image.getWidth()+"/"+
image.getHeight()
);
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/Hm9uN/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js"></script>
<style>
body{ background-color: ivory; padding:15px; }
canvas{border:1px solid red;}
#wrapper{ position:relative; width:400px; height:400px; }
#Tshirt,#container_canvas{ position:absolute; top:0; left:0; }
</style>
<script>
$(function(){
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.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if(width && height) {
image.setSize(width, height);
}
imgX=image.getAbsolutePosition().x;
imgY=image.getAbsolutePosition().y;
imgWidth=image.getWidth();
imgHeight=image.getHeight();
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function() {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on('mouseover', function() {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container_canvas',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var layer = new Kinetic.Layer();
layer.add(darthVaderGroup);
stage.add(layer);
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.darthVader,
width: 200,
height: 138,
name: 'image'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
darthVaderGroup.on("dragend",function(){$("#info").text(getImageInfo());});
function getImageInfo(){
var image=darthVaderImg;
return(
" X/Y:"+
image.getAbsolutePosition().x+"/"+
image.getAbsolutePosition().y+" -- Width/Height:"+
image.getWidth()+"/"+
image.getHeight()
);
}
}
function putDesign(designSrc){
designSrc = designSrc.split("images/");
var sources = {
darthVader: 'http://dl.dropbox.com/u/139992952/stackoverflow/love.png'
};
loadImages(sources, initStage);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
putDesign("yourAssets");
}); // end $(function(){});
</script>
</head>
<body>
<p>Info:<span id="info"></span></p><br/>
<div id="wrapper">
<img id="Tshirt" src="http://dl.dropbox.com/u/139992952/stackoverflow/Tshirt.png" width=167px height=167px>
<div id="container_canvas"></div>
</div><br/>
</body>
</html>