4

私はHTML5が初めてです。外部からキャンバス内に画像をドロップする機能を実装する必要があります。その後、キャンバス内に目に見える境界があり、画像をある境界から別の境界に移動できます。次のリンクと同じです。 http://custom.case-mate.com/diy?bypassLandingPage=true

サイトでは、ユーザーがパターンを選択し、画像をそこにドラッグします。次に、境界間で画像をドラッグできます。そのような機能を実装するための解決策を教えてください。

これが私が試したことです、

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {position:relative;
        left:150%;
        border: 10px solid #9C9898;
        background-color: grey;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 300,
          height: 400,
        });

        var layer = new Kinetic.Layer();

        var redLine = new Kinetic.Line({
          points: [150, 0, 150, 400],
          stroke: "white",
          strokeWidth: 2,
        });

        var blueLine = new Kinetic.Line({
          points: [150, 0, 150, 120, 300, 120],
          stroke: "white",
          strokeWidth: 2,
        });

        var thirdLine = new Kinetic.Line({
          points: [300, 120, 150, 120, 150, 400],
          stroke: "white",
          strokeWidth: 2,
        });

        var imageObj = new Image();
        imageObj.onload = function() {
          var image = new Kinetic.Image({
            x: stage.getWidth() / 2 - 50,
            y: stage.getHeight() / 2 - 60,
            image: imageObj,
            width: 100,
            height: 120,

          }); 
           image.draggable(true);   
          layer.add(image);

          // add the layer to the stage
          stage.add(layer);
        };
        imageObj.src = "images/212.png";
        layer.add(redLine);
        layer.add(blueLine);
        layer.add(thirdLine);
        stage.add(layer);
};

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
4

1 に答える 1

0

HTML5 ネイティブのドラッグ アンド ドロップに関する優れたチュートリアルは次のとおりです: http://www.html5rocks.com/en/tutorials/dnd/basics/

基本的に、ドラッグ可能な属性を使用して、HTML5 でアイテムをドラッグ可能として宣言できます。

<div class="draggable" draggable="true">A</div>
<div class="draggable" draggable="true">B</div>

...そして、Javascript を使用して次のようなイベントを処理します。

var items = document.querySelectorAll('.draggable');
[].forEach.call(items, function(item) {
  item.addEventListener('dragstart', function(){ /*handle drag start*/ }, false);
  item.addEventListener('dragenter', function(){ /*handle drag enter*/ }, false)
  item.addEventListener('dragover',  function(){ /*handle drag over*/ }, false);
  item.addEventListener('dragleave', function(){ /*handle drag leave*/ }, false);
  item.addEventListener('drop',      function(){ /*handle drop*/ }, false);
  item.addEventListener('dragend',   function(){ /*handle drag end*/ }, false);
});
于 2012-07-10T10:32:16.647 に答える