Image 图片

我们可以通过实例化一个 Konva.Image() 对象创建图片。

图片的 image 属性可以是以下类型：

window.Image 实例或 document.createElement('image')
canvas 对象
video 对象

点击 Konva.Image documentation 查看详细属性和方法说明。

如果你想在 canvas 里面绘制 SVG 图片，请查看How to draw SVG image post.

Konva Image Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Image Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      // main API:
      var imageObj = new Image();
      imageObj.onload = function() {
        var yoda = new Konva.Image({
          x: 50,
          y: 50,
          image: imageObj,
          width: 106,
          height: 118
        });

        // add the shape to the layer
        layer.add(yoda);
        layer.batchDraw();
      };
      imageObj.src = '/assets/yoda.jpg';

      // alternative API:
      Konva.Image.fromURL('/assets/darth-vader.jpg', function(darthNode) {
        darthNode.setAttrs({
          x: 200,
          y: 50,
          scaleX: 0.5,
          scaleY: 0.5
        });
        layer.add(darthNode);
        layer.batchDraw();
      });
    </script>
  </body>
</html>