5
Updated Working FiddleHTML5、はdragstartグループ
オリジナル質問
私はこのコードでは、円からの「はdragstart」とのメッセージが表示されますカント、なぜ私が思っていた...
内のオブジェクトからドラッグしたときにメッセージ「円」を得ることができません。私は、いくつかの作業コードをhttp://www.html5canvastutorials.comから試してみました。このコードでは：http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/、それは働いています。
jsfiddle：円がグループの一部であり、したがって、イベント「はdragstart」の一つだけがグループまたは円のいずれかを認識することができますので、あなたがサークルからのメッセージが表示されない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>
Tnxたくさん....あなたは私にアナさんを考えさせました。 –
circle.on（ "マウスダウンtouchstart"、関数（）{ writeMessage（messageLayer、 "円形タッチ"）; group.on（ "dragmove"、関数（）{ writeMessage（messageLayer、 "円移動"）; }）; }）; darthVaderImg.on（ "マウスダウンtouchstart"、関数（）{ writeMessage（messageLayer、 "画像タッチ"）; group.on（ "dragmove"、関数（）{ writeMessage（messageLayer、 "画像の動き"）。 }）; }）; –
あなたの問題が解決したら答えを受け入れることを検討してください:) – Ani