1

画像が存在し、形状が存在し、形状が同じステージでドラッグ可能な HTML5 キャンバスの作成に問題があります。私の直感では、複数のレイヤーまたは複数のステージ/キャンバスを作成する必要があることがわかりました。次に、1 つをレギュラーにし、もう 1 つをキネティックにします。ドラッグ可能な形状のコード、画像と形状を表示するコードを見つけましたが、私の問題は構文の実装にのみあると思います。コードは次のとおりです。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </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: 578,
          height: 200

        var layer = new Kinetic.Layer();
        var rectX = stage.getWidth() / 2 - 50;
        var rectY = stage.getHeight() / 2 - 25;

        var box = new Kinetic.Rect({
          x: rectX,
          y: rectY,
          width: 100,
          height: 50,
          fill: "#00D2FF",
          stroke: "black",
          strokeWidth: 4,
          draggable: true
        });

        var layer1 = new Kinetic.Layer();

        var imageObj = new Image();
        imageObj.onload = function() {
          var image = new Kinetic.Image({
            x: stage.getWidth() / 2 - 53,
            y: stage.getHeight() / 2 - 59,
            image: imageObj,
            width: 106,
            height: 118
          });

          layer1.add(image);
          stage.add(layer1);

        // add cursor styling
        box.on("mouseover", function() {
          document.body.style.cursor = "pointer";
        });
        box.on("mouseout", function() {
          document.body.style.cursor = "default";
        });

        layer.add(box);
        stage.add(layer);

        imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
      };

    </script>
  </head>
  <body onmousedown="return false;">
    <div id="container"></div>
  </body>
</html>
4

1 に答える 1

0

この Web サイトを試してください: w3shools.com/html5/html5_draganddrop.asp

于 2012-07-11T23:22:46.877 に答える