Menu
Updated Working Fiddle
Original question
I was wondering why I cant get a message with the "dragstart" from the circle in this code...
I cant get the message "circle" when its dragged. I tried, with some working code from http://www.html5canvastutorials.com. In this code: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/, it is working.
jsfiddle: http://jsfiddle.net/zoutepopcorn/YXJpH/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.1.2.js"></script>
<script src="setting.js"></script>
<script src="imgStyle.js"></script>
<script>
var stage;
var layer;
setupStage();
function setupStage() {
stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 800
});
layer = new Kinetic.Layer();
messageLayer = new Kinetic.Layer();
stage.add(messageLayer);
}
function writeMessage(messageLayer, message) {
var context = messageLayer.getContext();
messageLayer.clear();
context.font = "18pt Calibri";
context.fillStyle = "black";
context.fillText(message, 10, 25);
}
function drawImage(imageObj) {
var darthVaderImg = new Kinetic.Image({
image: imageObj,
x: 100,
y: 100,
width: 200,
height: 137,
draggable: true
});
var group = new Kinetic.Group({ draggable: true });
group.add(darthVaderImg);
var circle = new Kinetic.Circle({ x: 105, y: 105, radius: 10, fill: 'red', stroke: 'black', name: 'circle', strokeWidth: 4, draggable: true });
group.add(circle)
group.on("dragstart", function() { writeMessage(messageLayer, "group"); } );
circle.on("dragstart", function() { writeMessage(messageLayer, "circle"); // <--- does not work in the GROUP!!! } );
layer.add(group);
stage.add(layer);
stage.add(messageLayer);
stage.draw();
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(imageObj);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>
771
You do not see the message from circle because circle is part of the group and thus, only one of the event "dragstart" can be recognized either on the group or the circle, when you try to move circle the event is recognized for the group as circle is part of the group. You can probably add a check inside the function associated with "dragstart" for group to check if the object selected is "circle" and show your message.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
