Javascript html5，从组中的对象拖动启动_Javascript_Html_Kineticjs

Javascript html5，从组中的对象拖动启动

javascript html

Javascript html5，从组中的对象拖动启动,javascript,html,kineticjs,Javascript,Html,Kineticjs,原始问题我想知道为什么我不能从这个代码中的圆圈中获得带有“dragstart”的消息当“圆圈”被拖动时，我无法得到它的信息。我试过了，使用了来自的一些工作代码。在这个代码中，它正在工作 jsfiddle：无标题文件身体{ 边际：0px；填充：0px； } var期； var层； setupStage（）；函数setupStage（）{ 阶段=新的动力学阶段({ 容器：“容器”，宽度：800，身高：800 }); 层=新的动能层（）； messageLayer=新的dynamic

原始问题

我想知道为什么我不能从这个代码中的圆圈中获得带有“dragstart”的消息

当“圆圈”被拖动时，我无法得到它的信息。我试过了，使用了来自的一些工作代码。在这个代码中，它正在工作

jsfiddle：


无标题文件
身体{
边际：0px；
填充：0px；
}
var期；
var层；
setupStage（）；
函数setupStage（）{
阶段=新的动力学阶段({
容器：“容器”，
宽度：800，
身高：800
});
层=新的动能层（）；
messageLayer=新的dynamic.Layer（）；
stage.add（messageLayer）；
}
函数writeMessage（messageLayer，message）{
var context=messageLayer.getContext（）；
messageLayer.clear（）；
context.font=“18pt Calibri”；
context.fillStyle=“黑色”；
上下文。填充文本（消息，10，25）；
}
函数drawImage（imageObj）{
var darthVaderImg=新动能图({
图片：imageObj，
x:100，
y:100，
宽度：200，
身高：137，
德拉格布尔：是的
});
var group=新的动力学组（{draggable:true}）；
添加组（darthVaderImg）；
var circle=new dynamic.circle（{x:105，y:105，半径：10，填充：'red'，笔划：'black'，名称：'circle'，笔划宽度：4，draggable:true}）；
组。添加（圆）
on（“dragstart”，function（）{writeMessage（messageLayer，group”）；}）；
在（“dragstart”，function（）{writeMessage（messageLayer，circle”）；//上，您看不到来自circle的消息，因为circle是组的一部分，因此，只有事件“dragstart”中的一个可以在组或圆圈上识别，当您尝试移动圆圈时，该事件会被识别为该组的事件，因为圆圈是该组的一部分。您可能可以在与“dragstart”相关联的函数中为该组添加一个检查，以检查所选对象是否为“圆圈”，并显示您的消息。circle.on（“mousedown touchstart”），function（）{writeMessage（messageLayer，circle touch”）；group.on（“dragmove”，function（）{writeMessage（messageLayer，circle move”）；}）；darthVaderImg.on（“mousedown touchtstart”，function（）{writeMessage（messageLayer，image touch”）（RoDoM迁），函数（）{WrreMeMeScript（MasaGelayle，Simple Stand）；}）；考虑如果问题得到解决，接受答案：）将帮助其他人容易地识别它。
<!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>