konva系列教程2：绘制图形

2022-06-24 23:34:50 阅读：187 来源： 互联网

标签：教程 const konva layer add new 绘制 Konva

大家好，我是前端西瓜哥，今天继续学习 konva。

konva 库为我们提供了很多基础的图形，我们来看看具体都有哪些。

绘制矩形（Rect）

// 舞台对象，会找到对应元素，在其下创建 canvas 元素
const stage = new Konva.Stage({
  container: '#container', // id of container <div>
  width: 300,
  height: 300
});

// 图层对象，图形对象必须放在图层对象下
const layer = new Konva.Layer();

// 绘制矩形
const rect = new Konva.Rect({
  x: 0,
  y: 0,
  width: 300,
  height: 300,
  fill: '#ff5645',
  stroke: '#000'
});

// 添加矩形到图层下
layer.add(rect);
// 添加图层到舞台下
stage.add(layer);

我们用 Konva.Rect 构造函数来创建矩形对象。

通过 x 和 y 设置矩形左上角坐标位置，比你高通过 width 和 height 设置矩形尺寸。

fill 用于设置填充的颜色，stroke 则是描边颜色。如果不提供 fill 或 stroke，就会填充颜色或进行描边绘制。

绘制圆形（Circle）

const circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 40,
  fill: 'red',
})
layer.add(circle);

同样，我们用 Konva.Circle 创建圆形对象。

传入的配置项中，x 和 y 表示圆形位置，而不是左上角的位置。radius 则为圆形半径。

这里我们用调用 stage 对象的 width() 和 height() 方法拿到画布的宽高，让圆心位于在画布中央。

绘制椭圆（Ellipse）

const ellipse = new Konva.Ellipse({
  x: 100,
  y: 100,
  radius: {
    x: 70,
    y: 40,
  },
  // 或者：
  // radiusX: 70,
  // radiusY: 40,
  fill: '#888'
});
layer.add(ellipse);

x 和 y 设置圆心位置。radius 对象的 x 和 y 属性设置椭圆的 x 轴半径和 y 轴半径。

绘制线条（Line）

const line = new Konva.Line({
  points: [20, 20, 100, 50, 108, 90],
  stroke: 'blue',
  strokeWidth: 8,
  lineCap: 'round',
  lineJoin: 'round',
  // closed: true,
  // tension: 0.3
});
layer.add(line);

points 为一系列的点的 x 和 y 坐标，它们会按数组顺序依次连接。

stroke 设置描边颜色，strokeWidth 设置描边线宽，lineCap 为线条两端的样式，这里的 'round' 表示圆滑效果。

lineJoin 为两条线连接点的过渡样式。

我们也可以通过头尾相连，来绘制一个不规则多边形，只需要加一个 closed: true 配置即可。

此外我们可以通过 tension 属性，设置一个光滑数值（比如 tension: 1），让线条光滑化。

绘制图片（Image）

const originImg = new Image();
originImg.src = './fe_watermelon.png';
originImg.onload = () => {
  // 绘制图片
  const img = new Konva.Image({
    x: 30,
    y: 30, 
    image: originImg
  });
  layer.add(img);
};

一般来说，图片最好在加载完成后再绘制到 canvas 上，所以通常会配合 onl oad。

如果用 canvas 原生的 drawImage，如果你在图片加载完成前去执行绘制操作，会导致绘制失败。

konva 对这种情况做了优化，可以不用 onl oad，即使你传入一个没有加载完成的图片，它也会等待它加载完再绘制出来，并且保持它在原来的图形树结构位置。

img.onload 的写法有点繁琐，可以用 konva 的另一种写法：

Konva.Image.fromURL(
  './fe_watermelon.png',
  (img) => {
    // 这里的 img 是 Konva.Image 实例
    img.setAttrs({
      x: 10,
      y: 10
    });
    layer.add(img);
  }
);

请注意 canvas 绘制图片的 跨域问题。

绘制文字（Text）

const text = new Konva.Text({
  x: 0,
  y: 0,
  fontSize: 18,
  text: '前端 西瓜哥,前端西瓜哥',
  width: 110,
  align: 'center',
  fontFamily: 'Songti SC' // 宋体
});
layer.add(text);

相比 canvas 的原生 API，konva 的文字绘制还支持设置容器宽度（width），当内容超过宽度时，会自动换行，还可以通过设置 align: 'center' 来实现居中对齐。

绘制路径（Path）

const path = new Konva.Path({
  x: 30,
  y: 100,
  data: 'M 0 0 L 50 50 C 90 80 60 50 60 10 Z',
  stroke: 'pink'
})
layer.add(path);

通过 data 来描述路径的形状。这个 data 其实就是 SVG 的 path 元素的 d 属性值，通过一些单字母命令和数字，描述各种绘制命令。

比如 M 表示移动到某个点、C 表示三阶贝塞尔曲线、Z 表示将路径的首位闭合等等。具体可以看 SVG 相关文档。

其他

除了这些常用的，konva 还提供一些用得比较少的形状：

锲形（Wedge），或者说是扇形；
文字路径（TextPath），Text 和 Path 的组合，让文字可以在路径上排布；
精灵（Sprite），其实就是通过在一些用户操作，让元素每帧显示不同的图片，比如人物行走，常见于游戏领域；
星星（Star），绘制正 N 角星；
圆环（Ring），就是中间被开了一个圆洞的圆形；
圆弧（Arc），圆环的基础上再切割一下；
标签（Label）；
正多边形（RegularPolygon）；
箭头（Arrow）。

此外，我们还可以定义自己的形状，具体我们下一篇文章再讲。

我是前端西瓜哥，欢迎关注我，一起学习前端知识。

标签：教程,const,konva,layer,add,new,绘制,Konva
来源： https://www.cnblogs.com/fe-watermelon/p/16410499.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9