0

在画布上我有几个图像

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);

如果这是不可能的，是否有任何替代方案。

4

2 回答 2

1

一旦你在画布上画了一些东西，你就不能以任何方式访问\更改它。您唯一能做的就是在新位置重新绘制它（即从当前位置删除它并在新位置再次绘制它）

如果你想实现它使用 SVG

于 2013-02-14T11:46:58.797 回答
1

是的！

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

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

我可以担保的三个流行的库是：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>
于 2013-02-15T07:16:11.570 回答