Image 图片

获取Konva最新的信息

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

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

  1. window.Image 实例 或 document.createElement('image')
  2. canvas 对象
  3. 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>