html5, перетаскивание с объекта в группе

Обновленный рабочий скрипт

Исходный вопрос

Мне было интересно, почему я не могу получить сообщение с «драгстартом» из кружка в этом коде...

Я не могу получить сообщение «круг», когда его перетаскивают. Я попробовал с некоторым рабочим кодом из http://www.html5canvastutorials.com. В этом коде: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/, это работает.

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>

javascript html kineticjs
person Johan Hoeksma    schedule 04.12.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не видите сообщение от круга, потому что круг является частью группы и, таким образом, только одно из событий "драгстарт" может быть распознано либо в группе, либо в круге, когда вы пытаетесь переместить круг, событие распознается для группы поскольку круг является частью группы. Вероятно, вы можете добавить проверку внутри функции, связанной с «dragstart» для группы, чтобы проверить, является ли выбранный объект «кругом», и показать свое сообщение.

person Ani    schedule 04.12.2012
comment
Circle.on (нажатие кнопки мыши, функция () { writeMessage (messageLayer, круговое касание); group.on (перетаскивание, function () { writeMessage (messageLayer, круговое движение); }); }); darthVaderImg.on (нажатие кнопки мыши, функция () { writeMessage (messageLayer, касание изображения); group.on (перетаскивание, function () { writeMessage (messageLayer, перемещение изображения); }); }); - person Johan Hoeksma; 05.12.2012
comment
рассмотрите возможность принятия ответа, если ваша проблема решена :) Поможет другим легко определить ее - person Ani; 09.12.2012