Question

我无法创建一个HTML5画布，其中存在图像，存在形状，并且形状可在同一舞台上拖动。我的直觉告诉我，我需要创建多个图层或多个阶段/画布。然后有一个是常规的，另一个是Kinetic。我找到了一些可拖动形状的代码，用于显示图像和形状的代码，我认为我的问题只在于语法的实现。这是代码：

<!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>

Answer 1

试试这个网站：w3shools.com/html5/html5_draganddrop.asp

HTML5 Canvas：如何在画布和形状上创建图像和形状是Drag n Droppable？

1 个答案: