I am developing canvas to create hotel floor view. I am drawing images on canvas from database. I am taking x,y co-ordinates from database and drawing image on that points. But i want to give touch event to those images. I want to replace image on touch or click event. I want to create same functionality as that of book my show .
this is my code.
<!DOCTYPE HTML>
<html>
<head>
<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>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:100%;
height:100%;
}
html,body,kineticjs-content {
width:100%;
height:100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://localhost/zoilo_admin/public/kinetic-v5.1.0.js"></script>
<script defer="defer">
function writeMessage(message) {
text.setText(message);
layer.draw();
}
function loadImages(sources, position, callback) {
var assetDir = '';
var images = {};
var loadedImages = 0;
var numImages = 0;
for (i = 0; i < sources.length; i++)
{
numImages++;
}
for (i = 0; i < sources.length; i++)
{
images[i] = new Image();
images[i].onload = function () {
if (loadedImages == (sources.length - 1)) {
callback(images, position);
}
loadedImages++;
};
images[i].src = assetDir + sources[i];
}
}
function buildStage(images, position) {
var positionIndex = 0;
var tableActual = {};
console.log(images);
for (var i = 0; i < sources.length; i++)
{
console.log("Here");
tableActual[i] = new Kinetic.Image({
image: images[i],
x: position[i].x,
y: position[i].y
});
// var tableName = src;
// var table1 = new Kinetic.Image({
// image: images[src],
// x: position[positionIndex].x,
// y: position[positionIndex].y
// });
tableActual[i].on('click', function () {
console.log(this.index);
var image = new Kinetic.Image({
image: '4top.png',
x: position[this.index].x,
y: position[this.index].y
});
drawImage(image);
switch (this.index)
{
case 0:
writeMessage('Click on Table ' + 0);
tableActual[positionIndex] = new Kinetic.Image({
image: images[positionIndex],
x: position[positionIndex].x,
y: position[positionIndex].y
});
this.setIm = "4top.png";
break;
case 1:
writeMessage('Click on Table ' + 1);
break;
case 2:
writeMessage('Click on Table ' + 2);
break;
case 3:
writeMessage('Click on Table ' + 3);
break;
case 4:
writeMessage('Click on Table ' + 4);
break;
}
writeMessage('mouseover ' + this[src]);
});
drawImage(tableActual[i]);
positionIndex++;
}
// finally, we need to redraw the layer hit graph
layer.drawHit();
}
var stage = new Kinetic.Stage({
container: 'container',
width: $(window).width(),
height: $(window).height()
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: 10,
y: 10,
fontFamily: 'Calibri',
fontSize: 24,
text: '',
fill: 'black'
});
var sources = [
'house204-2.jpg',
'house204-1.jpg',
'4top.png',
'house204-1.jpg',
'4top.png'
];
var position = [
{
x: 380,
y: 60
},
{
x: 180,
y: 60
}
,
{
x: 90,
y: 60
},
{
x: 260,
y: 60
},
{
x: 50,
y: 60
}
];
loadImages(sources, position, buildStage);
function drawImage(Image)
{
layer.add(Image);
layer.add(text);
stage.add(layer);
// in order to ignore transparent pixels in an image when detecting
// events, we first need to cache the image
Image.cache();
// next, we need to redraw the hit graph using the cached image
Image.drawHitFromCache();
}
</script>
</body>
</html>
Yes! you can change it on touch/click event by changing source of that java script image.
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.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: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
var filteredYoda = new Kinetic.Image({
x: 320,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
// add the shape to the layer
layer.add(yoda);
layer.add(filteredYoda);
// add the layer to the stage
stage.add(layer);
stage.on('click',function(){
imageObj.src = 'http://crushlabs.com/wp-content/uploads/2013/01/jacee-terry-hello-card-business-card-design-back.jpg';
});
// apply grayscale filter to second image
filteredYoda.applyFilter(Kinetic.Filters.Grayscale, null, function() {
layer.draw();
});
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
</script>
Related
How does the getClientRect(); method work in this code? Is that mean to get the sides of the rectangle?
Also, what is layer.children.each in the code below? Is that mean selecting each child of the node? Can anyone explain to me how these methods work? I checked the document but still not getting how they work.
Thank you so much for your help! I was able to solve this problem.
var stage = new Konva.Stage({
width: 400,
height: 200,
container: 'container'
});
var layer = new Konva.Layer();
stage.add(layer);
layer.on('dragmove', function(e) {
var target = e.target;
var targetRect = e.target.getClientRect();
layer.children.each(function(obj) {
if (obj === target) {
return;
}
if (haveIntersection(obj.getClientRect(), targetRect)) {
alert("Intersection")
}
});
});
function haveIntersection(r1, r2) {
return !(
r2.x > r1.x + r1.width/2 ||
r2.x + r2.width/2 < r1.x ||
r2.y > r1.y + r1.height/2 ||
r2.y + r2.height/2 < r1.y
);
}
// This will draw the image on the canvas.
function drawImage(source, konvaImage) {
layer.add(konvaImage);
var image = new Image();
image.src = source;
image.onload = function() {
konvaImage.image(image);
layer.draw();
}
}
//1yen
var ichiYenImg = new Konva.Image({
x: 20,
y: 20,
width: 100,
height: 100,
draggable: true
});
var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
drawImage(sourceImg1, ichiYenImg);
var goYenImg = new Konva.Image({
x: 120,
y: 20,
width: 100,
height: 100,
draggable: true
});
var sourceImg2 = "https://illustrain.com/img/work/2016/illustrain09-okane7.png";
drawImage(sourceImg2, goYenImg);
//piggy bank 1yen
var ichiYenpiggyImg = new Konva.Image({
x: 300,
y: 100,
width: 100,
height: 100,
draggable: false
});
var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
drawImage(sourceImg7, ichiYenpiggyImg);
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/konva#4.0.5/konva.min.js"></script>
</head>
<body>
<div id="stage-parent">
<div id="container"></div>
</div>
</body>
</html>
A layer may have several children elements. So layer.children is just an array with of such objects.
layer.children.each(func) is a function similar to Array.prototype.forEach()
. It allows to to executre a function for every element in children array.
node.getClientRect() is a function that calcualte absolute boudning box of any Konva.Node. Bounding box is just an object like this:
{
x: 10,
y: 10,
width: 60,
height: 60
}
It allows you to detect the position and the size of any object, even if it is scaled, rotate, etc. Usually, that function can be used to defined position f edges of the shapes.
var stages = new Array() ;
var limites = new Array() ;
numStage=0;
r = {
'x':65,
'y':120,
'xwidth':335,
'yheight':210
};
limites.push(r);
stages[numStage] = new Kinetic.Stage({
container: 'cmg_canvas_'+numStage,
width: 450,
height: 450
});
//creation image
obj = new Image();
obj.src = 'http://i.imgur.com/zFZgKuS.jpg';
image = new Kinetic.Image({
image: obj,
width: 450,
height: 450
});
// add image to calque
layer = new Kinetic.Layer();
layer.add(image);
stages[numStage].add(layer); //add image to canvas
layer = new Kinetic.Layer();
//set limit x y h l
/*var rect = new Kinetic.Rect({
name: 'limite',
x: limites[numStage].x,
y: limites[numStage].y,
width: limites[numStage].xwidth,
height: limites[numStage].yheight,
stroke: 'black',
strokeWidth: 0.5
});*/
//layer.add(rect);// add to canvas
stages[numStage].add(layer);
$('.cmg_text').live('blur', function(){
idText = 'cmg_line0';
numStage = 0;
drawTextPath(numStage, idText,$(this).val(),50,22,numStage);
//text = getText(this).text;
});
function getSVG(x,y,w,verif) {
halfw = parseFloat((w/2).toFixed(2));
x1 = parseFloat((halfw/2).toFixed(2));
x2 = parseFloat(halfw + x1);
if(parseInt(verif))
{
y1 = parseFloat(y) * 2 +18;
y2 = parseFloat(y) * 2 +18;
}
else
{
y1 = -18;
y2 = -18;
}
str = 'M '+x+','+y+' C '+x1+','+y1+' '+x2+','+y2+' '+w+','+y;
return str;
}
function drawTextPath(numStage, textId,text,valueSlider, newFontSize,numStage){
//'M 0,115 C42,-18 126,-18 165,115';
//'M 0,115 C45,230 180,230 180,115';
var arcOnly = 0;
if(textId == 'cmg_line0')
{
console.log('limites[numStage].yheight/2'+limites[numStage].yheight/2);
console.log('limites[numStage].xwidth'+limites[numStage].xwidth);
svg = getSVG(0,valueSlider,valueSlider*6.3,0);
arcOnly = 0;
}
//alert(svg);
console.log(parseFloat(limites[numStage].y));
console.log(parseFloat(arcOnly));
console.log(parseFloat(limites[numStage].y - arcOnly));
var layer = new Kinetic.Layer({name:'textPathLayer',draggable:true});
var textpath = new Kinetic.TextPath({
name:'TextPath',
id: textId,
//x: 0,
//x: limites[numStage].x + limites[numStage].xwidth/2,
//y: 0,
//y: limites[numStage].y + limites[numStage].yheight/2,
x: limites[numStage].x ,
y: limites[numStage].y + limites[numStage].yheight/2,
fill: '#000',
fontSize: newFontSize,
fontFamily: 'Arial',
text: text,
//offsetX:0,
//offsetY:0,
draggable: true,
dragBoundFunc: function(pos){
p = textParams(this, pos);
return {x: p.newX, y: p.newY};
},
data: svg
});
//
layer.add(textpath);
stages[numStage].add(layer);
//layer.moveToTop();
//layer.draw();
//stages[0].draw();
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/4.6.0/kinetic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="cmg_canvas_0"></div>
<input type='text' class='cmg_text' />
I have to draw a draggable textpath with kineticjs, with text given by an input text, the action is triggered in blur.
I have a stage that contain 3 layers;
Layer for the background, and one layer for the textpath.
My problem that the draggable in the textpath is not working,
i tried to set the text layer in the top, but i didn't get it draggable.
This is my jsfiddle
I have a doubt of inner layer problem.
Thanks in advance.
I am trying to recreate the game http://www.sinuousgame.com/ and started studying html5 canvas and kineticJS.
Recently i came across the getIntersection function and coudnt find much details regarding it.But with what i had ,i did make a code to get the Collision detection done using getIntersection() function.
But it doesnt seem to be working.
As you can see, My Fiddle: http://jsfiddle.net/p9fnq/8/
//The working player code
var LimitedArray = function(upperLimit) {
var storage = [];
// default limit on length if none/invalid supplied;
upperLimit = +upperLimit > 0 ? upperLimit : 100;
this.push = function(item) {
storage.push(item);
if (storage.length > upperLimit) {
storage.shift();
}
return storage.length;
};
this.get = function(flag) {
return storage[flag];
};
this.iterateItems = function(iterator) {
var flag, l = storage.length;
if (typeof iterator !== 'function') {
return;
}
for (flag = 0; flag < l; flag++) {
iterator(storage[flag]);
}
};
};
var tail = new LimitedArray(50);
var flag = 0, jincr = 0;
var stage = new Kinetic.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
listening: true
});
var layer = new Kinetic.Layer({
listening: true
});
stage.add(layer);
var player = new Kinetic.Circle({
x: 20,
y: 20,
radius: 6,
fill: 'cyan',
stroke: 'black',
draggable: true
});
var line = new Kinetic.Line({
points: [],
stroke: 'cyan',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(line);
layer.add(player);
// move the circle with the mouse
stage.getContent().addEventListener('mousemove', function() {
player.position(stage.getPointerPosition());
var obj = {
x: stage.getPointerPosition().x,
y: stage.getPointerPosition().y
};
tail.push(obj);
var arr = [];
tail.iterateItems(function(p) {
arr.push(p.x, p.y);
});
line.points(arr);
});
var x = 0;
var y = 0;
var noOfEnemies = 200;
var enemyArmada = new Array();
createEnemy();
function createEnemy() {
for (var i = 0; i < noOfEnemies; i++) {
var enemy = new Kinetic.Circle({
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
radius: 4.5 + 1.5 * Math.random(),
fill: 'red',
stroke: 'black'
});
enemy.speedX = enemy.speedY = (0.5 + Math.random() * 50);
enemyArmada.push(enemy);
layer.add(enemy);
}
}
var checkCollide = function() {
var position = stage.getPointerPosition();
if(position == null)
position = player.position();
if(position == null)
position = {x:0,y:0};
var collided = stage.getIntersection(position);
console.log(position);
if (typeof collided !== 'Kinetic.Shape') {
console.log("not shape");
}
else {
console.log("BOOOM!!!");
}
};
var anim = new Kinetic.Animation(function(frame) {
checkCollide();
for (var i = 0; i < noOfEnemies; i++) {
var e = enemyArmada[i];
e.position({
x: e.position().x - e.speedX * (frame.timeDiff / 400),
y: e.position().y + e.speedY * (frame.timeDiff / 400)
});
if (e.position().y < 0 || e.position().x < 0) {
e.position({
x: (Math.random() * (window.innerWidth + 600)),
y: -(Math.random() * window.innerHeight)
});
}
}
}, layer);
anim.start();
I need the collision to be detected. The function i have written here is checkCollide and its called within the kinetic.Animation function.
Can anyone help me out with this??
(If you don't know the solution,please do like the post,i need the solution badly)
The source of the problem
getIntersection(point) means "is any object at this point".
Since the point you're using is the player's position, getIntersection will always return true because player is always at its own position !
One solution
Put your player on one layer and all enemies on a separate layer.
That way you can hit test the enemy layer without the interference of the player object.
Code and a Demo: http://jsfiddle.net/m1erickson/JCfW8/
<!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 enemyLayer = new Kinetic.Layer();
stage.add(enemyLayer);
var playerLayer = new Kinetic.Layer();
stage.add(playerLayer);
var player = new Kinetic.Circle({
x:100,
y:100,
radius: 10,
fill: 'green',
draggable: true
});
player.on("dragmove",function(){
if(enemyLayer.getIntersection(player.position())){
this.fill("red");
playerLayer.draw();
}
});
playerLayer.add(player);
playerLayer.draw();
var enemy = new Kinetic.Circle({
x:200,
y:100,
radius: 20,
fill: 'blue',
draggable: true
});
enemyLayer.add(enemy);
enemyLayer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag the green player<br>Player will turn red if it collides<br>with the blue enemy</h4>
<div id="container"></div>
</body>
</html>
Another solution
Mathematically test the player against every enemy:
Warning: untested code--some tweaking might be required
function playerEnemyCollide(){
var playerX=player.x();
var playerY=player.y();
var playerRadius=player.radius();
for(var i=0;i<enemyArmada.length;i++){
var e=enemyArmada[i];
if(circlesColliding(playerX,playerY,playerRadius,e.x,e.y,e.radius)){
return(true);
}
}
return(false);
}
function circlesColliding(cx1,cy1,radius1,cx2,cy2,radius2){
var dx=cx2-cx1;
var dy=cy2-cy1;
return(dx*dx+dy*dy<(radius1*2+radius2*2);
}
i'm working on a drag&drop-function for images. I've oriented myself on this example here:
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
The JS framework KineticJS is used there.
In this example the properties (x,y,width,height) of Kinetic.Group and Kinetic.Image are set with 'normal' number values.
my problem is that i need this properties as variables, because my uploaded images have different values for height, width etc.
I've tried to change the code from the example for my own drag&drop web application, but it doesn't work as i want...
I can load and display images correctly, but i can't move or resize them. With number values for x,y,width,height it works all.
Here is the code of the changed method "initStage()" (the other methods are unchanged):
function initStage(images) {
stage = new Kinetic.Stage({
container: 'wb_dropzone',
width: 500,
height: 400
});
var imageGroups = new Array();
var imageInstances = new Array();
var layer = new Kinetic.Layer();
for(var i=0; i<Object.size(images); i++)
{
imageGroups[i] = new Kinetic.Group({
x: fileInfos[i][2][0]/*0*/,
y: fileInfos[i][2][1]/*0*/,
draggable: true
});
layer.add(imageGroups[i]);
imageInstances[i] = new Kinetic.Image({
x: 0/*fileInfos[i][2][0]*/,
y: 0/*fileInfos[i][2][1]*/,
image: images[i],
width: fileInfos[i][1][0],
height: fileInfos[i][1][1],
name: 'image',
stroke: 'black',
strokeWidth: 2,
dashArray: [10, 2]
});
imageGroups[i].add(imageInstances[i]);
addAnchor(imageGroups[i], 0, 0, 'topLeft');
addAnchor(imageGroups[i], fileInfos[i][1][0], 0, 'topRight');
addAnchor(imageGroups[i], fileInfos[i][1][0], fileInfos[i][1][1], 'bottomRight');
addAnchor(imageGroups[i], 0, fileInfos[i][1][1], 'bottomLeft');
imageGroups[i].on('dragstart', function() {
this.moveToTop();
});
}
stage.add(layer);
stage.draw();
}
More informations about "fileInfos":
[imagePath, [width, height], [X-pos., Y-pos.]]
(all dropped images are uploaded in a folder. The properties of each image are saved in a database.
Default x- and y-position is "0".)
Does anybody have an idea, how i can solve this problem?
I'm grateful for any help!
How to create draggable/resizable images that are loaded from your fileInfos
Call a function that creates the group+image+anchors based on your fileInfos[i]:
// pull info supplied by fileInfos for this “i”
var imgWidth=fileInfos[i][1][0];
var imgHeight=fileInfos[i][1][1];
var groupX=fileInfos[i][2][0];
var groupY=fileInfos[i][2][1];
// call a function that creates the draggable/resizable group
addImageGroup( images[i], imgWidth,imgHeight, groupX,groupY );
Here’s that function that creates the draggable/resizable group element:
function addImageGroup(image,imageWidth,imageHeight,groupX,groupY){
// width and height are based on the images width/height
var w=imageWidth;
var h=imageHeight;
var kGroup = new Kinetic.Group({
x:groupX,
y:groupY,
width:w+20, // must allow 10+10=20 for anchors
height:h+20,
draggable:true
});
layer.add(kGroup);
kGroup.on('dragstart', function() {
this.moveToTop();
});
var kImage = new Kinetic.Image({
x: 0,
y: 0,
image: image,
width: w,
height: h,
name: 'image',
stroke: 'black',
strokeWidth: 2,
dashArray: [10, 2]
});
kGroup.add(kImage);
addAnchor(kGroup, 0, 0, 'topLeft');
addAnchor(kGroup, w, 0, 'topRight');
addAnchor(kGroup, w, h, 'bottomRight');
addAnchor(kGroup, 0, h, 'bottomLeft');
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/buCzH/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container{
border:1px solid red;
width:350px;
height:350px;
}
</style>
</head>
<body onmousedown="return false;">
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
<script>
// create the stage
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer=new Kinetic.Layer();
stage.add(layer);
// build a test fileInfos array
// width/height will be gotten from actual images, so leave width/height==0
var fileInfos=[];
function addFile(x,y,w,h,imgURL){
fileInfos.push([imgURL,[w,h],[x,y]]);
}
addFile(30,100,102,102,"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
addFile(200,100,102,102,"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");
// load all the images
var images=[];
loadAllImages();
function loadAllImages(){
var imagesOK=0;
for (var i = 0; i < fileInfos.length; i++) {
var img = new Image();
images.push(img);
img.onload = function(){
if (++imagesOK==fileInfos.length ) {
// all images are loaded, so build the groups
for(var i=0;i<fileInfos.length;i++){
var imgWidth=fileInfos[i][1][0];
var imgHeight=fileInfos[i][1][1];
var groupX=fileInfos[i][2][0];
var groupY=fileInfos[i][2][1];
addImageGroup( images[i], imgWidth,imgHeight, groupX,groupY );
}
layer.draw();
}
};
img.src = fileInfos[i][0];
}
}
function addImageGroup(image,imageWidth,imageHeight,groupX,groupY){
// width and height are based on the images width/height
var w=imageWidth;
var h=imageHeight;
var kGroup = new Kinetic.Group({
x:groupX,
y:groupY,
width:w+20, // must allow 10+10=20 for anchors
height:h+20,
draggable:true
});
layer.add(kGroup);
kGroup.on('dragstart', function() {
this.moveToTop();
});
var kImage = new Kinetic.Image({
x: 0,
y: 0,
image: image,
width: w,
height: h,
name: 'image',
stroke: 'black',
strokeWidth: 2,
dashArray: [10, 2]
});
kGroup.add(kImage);
addAnchor(kGroup, 0, 0, 'topLeft');
addAnchor(kGroup, w, 0, 'topRight');
addAnchor(kGroup, w, h, 'bottomRight');
addAnchor(kGroup, 0, h, 'bottomLeft');
}
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);
}
</script>
</body>
</html>
I am using HTML 5 for the first time, and playing around with this HTML5 canvas tutorial.
I have changed the example to include 4 images and I want to be able to detect which image was clicked on before doing a redirect on the click event.
Here is my code as it currently is, can somebody tell me how I could detect which image has been clicked in my click event? Also, the mouseout event seems to not always resize the image, any ideas why?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 0px;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic2d-v1.0.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
function initRectangles(rectangles){
// initialize an array of rectangles that provide
// rectangular paths and properties for the images
return [{
name: "buffalo",
image: null,
x: 40,
y: 45,
width: 80,
height: 80,
scale: 1
}, {
name: "indianapolis",
image: null,
x: 125,
y: 45,
width: 80,
height: 80,
scale: 1
}, {
name: "miami",
image: null,
x: 210,
y: 45,
width: 80,
height: 80,
scale: 1
}, {
name: "nyjets",
image: null,
x: 295,
y: 45,
width: 80,
height: 80,
scale: 1
}];
}
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 mapImages(rectangles, images){
// map images to rectangles
var counter = 0;
for (var img in images) {
rectangles[counter++].image = images[img];
}
}
function initStage(images){
var rectangles = initRectangles(rectangles);
mapImages(rectangles, images);
kin = new Kinetic_2d("myCanvas");
var context = kin.getContext();
kin.setDrawStage(function () {
this.clear();
var mousePos = kin.getMousePos();
for (var n = 0; n < rectangles.length; n++) {
var rect = rectangles[n];
context.save();
context.translate(rect.x, rect.y);
context.scale(rect.scale, rect.scale);
kin.beginRegion();
var rectX = -1 * rect.width / 2;
var rectY = -1 * rect.height / 2;
context.drawImage(rect.image, rectX, rectY, rect.width, rect.height);
context.beginPath();
context.rect(rectX, rectY, rect.width, rect.height);
context.closePath();
this.addRegionEventListener("mouseover", function () {
document.body.style.cursor = "pointer";
rectangles[n].scale = 1.07;
});
this.addRegionEventListener("mouseout", function () {
document.body.style.cursor = "default";
rectangles[n].scale = 1;
});
this.closeRegion();
context.restore();
}
});
}
window.onload = function(){
var sources = {
buffalo: "buffalo.png",
indianapolis: "indianapolis.png",
miami: "miami.png",
nyjets: "nyjets.png"
};
loadImages(sources, initStage);
$("#myCanvas").click(function (e) {
});
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="90">
</canvas>
</body>
</html>
Try using event mouseup:
this.addRegionEventListener("mouseup", function() {
alert("mouse up");
});