Question

在画布上我有几张图片

var img1=new Image()
img1.src= "imgsrc.jpg"

var img2=new Image()
img2.src= "imgsrc.jpg"

var img3=new Image()
img3.src= "imgsrc.jpg"

然后我添加图像

ctx.drawImage(img1,20,20);
ctx.drawImage(img2,40,40);
ctx.drawImage(img3,80,80);

但是我无法单独移动它们。它甚至可能吗？例如

img1.moveTo(30,30);
img2.moveTo(50,50);
img3.moveTo(60,60);

如果不可能，有没有其他选择。

Answer 1

在画布上绘制某些内容后，您无法以任何方式访问\更改它。您唯一能做的就是在新位置重新绘制它（即从当前位置删除它并在新位置再次绘制）

如果你想实现它，请使用SVG

Answer 2

是！

有很多画布库允许在画布上使用“保留模式”元素。

使用“保留模式”，您可以在画布上的每个图像/元素上执行以下功能：移动，缩放，旋转，倾斜，动画，拖放，点击测试等等！

我可以担保的三个流行的图书馆是：FabricJS，KineticJS和EaselJs（还有其他好的图书馆 - 不要让任何人离开！）

这是一个使用KineticJS的小提琴，在画布上显示可拖动的图像：---

http://jsfiddle.net/m1erickson/bJuLe/

以下是一些代码：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      p{font-size:25px;}
    </style>
  </head>
  <body>
    <p>Darth Vader is a "retained" image -- try dragging him around !</p>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script>
    <script>
      function drawImage(imageObj) { 
        var stage = new Kinetic.Stage({
          container: "container",
          width: 500,
          height: 400
        });
        var layer = new Kinetic.Layer();

        // darth vader
        var darthVaderImg = new Kinetic.Image({
          image: imageObj,
          x: stage.getWidth() / 2 - 200 / 2,
          y: stage.getHeight() / 2 - 137 / 2,
          width: 200,
          height: 137,
          draggable: true
        });

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

        layer.add(darthVaderImg);
        stage.add(layer);
      }
      var imageObj = new Image();
      imageObj.onload = function() {
        drawImage(this);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

    </script>
  </body>
</html>

在html 5画布上移动图像

2 个答案: