图片标注编辑平台搭建系列教程(4)——fabric几何定制渲染

背景

标注的几何,有时需要一些定制化的渲染样式,例如,线中间展示箭头,表示方向。本期教程教大家如何实现fabric几何定制化渲染。

带箭头的线

fabric提供了一些原生的几何,例如Point、Polyline、Polygon。同时提供了一些抽象的实体,如Object、Path。

如果使用原生的几何,可配置的样式是有限的。

比如Point的配置是:

{
    radius: 5,
    stroke: 'rgba(0,0,0,1)',
    strokeWidth: 2,
    fill: 'rgba(255,0,0,1)'
}

Polyline的配置是:

{
    stroke: 'rgba(0,0,0,1)',
    strokeWidth: 5
}

Polygon的配置是:

{
    fill: 'rgba(255,0,0,0,3)',
    strokeWidth: 1
}

可见这些线宽、线颜色、填充色等并不能实现箭头样式,需要对这些类进行扩展。

fabric提供了方法,可以扩展原生几何,代码如下:

export const NewPolyline = fabric.util.createClass(fabric.Polyline, {
  type: 'NewPolyline',

  initialize: function (points: any = [], options: any = {}) {
    this.callSuper('initialize', points, { ...options }); // 调用Polyline的初始化方法
  },
  
  _render: function (ctx: any) {
    // 自定义渲染,每次canvas.renderAll()都会触发该方法。
    this.callSuper('_render', ctx);
  }
}

此时我们得到了一个新的fabric几何类型:NewPolyline。其初始化参数和Polyline一致,points是点序,options里设置其样式。

而箭头样式,需要在_render方法里实现。_render方法可以拿到ctx,即canvas的实例,我们可以利用ctx进行各种绘制操作。

注意:在_render这个步骤,每个几何都有自己的坐标系,其坐标系原点是几何的外接矩形的中心点。

因此,我们每个坐标都需要减去当前几何的width/2和height/2,进行原点平移。

举个例子,比如我们有一条线,其参数如下:

{
    left: 10,
    top: 10,
    points: [{x: 0, y: 0}, {x: 5, y: 0}, {x: 5, y: 5}],
}

在坐标系中,如图,

left和top将要素的坐标系从O移动到了O',在此基础上,绘制折线[[0,0],[5,0],[5,5]]。

在渲染时,fabric又将坐标原点O'平移到外接矩形的中心点O''。

知道坐标系后,我们先来求线段的中点:

const points = this.get('points');
const width = this.get('width');
const height = this.get('height');

for (let i = 0; i < points.length; i++) {
  const midX = (points[i].x + points[i + 1].x) / 2 - width / 2;
  const midY = (points[i].y + points[i + 1].y) / 2 - height / 2;
  console.log(midX, midY);
}

// 结果:
// -2.5, -2.5
// 2.5, -2.5
// 2.5, 2.5

看懂上面的代码,你就可以以线段中心点为中心,画沿着线段的三角形了,代码如下:

for (let i = 0; i < points.length - 1; i++) {
      const midX = (points[i].x + points[i + 1].x) / 2 - width / 2;
      const midY = (points[i].y + points[i + 1].y) / 2 - height / 2;
      const rotate = Math.atan2(points[i + 1].y - points[i].y, points[i + 1].x - points[i].x);
      ctx.moveTo(midX, midY);
      const firstX = midX - (arrowWidth / 2) * Math.sin(rotate);
      const firstY = midY + (arrowWidth / 2) * Math.cos(rotate);
      ctx.lineTo(firstX, firstY);
      const secondX = midX + (arrowWidth / 2) * Math.sqrt(3) * Math.cos(rotate);
      const secondY = midY + (arrowWidth / 2) * Math.sqrt(3) * Math.sin(rotate);
      ctx.lineTo(secondX, secondY);
      const thirdX = midX + (arrowWidth / 2) * Math.sin(rotate);
      const thirdY = midY - (arrowWidth / 2) * Math.cos(rotate);
      ctx.lineTo(thirdX, thirdY);
      ctx.closePath();
      ctx.fill();
 }

效果图如下:

了解这个原理,你就可以利用canvas的绘制操作实现任何的自定义样式。

缩放控制线宽等宽

上一章我们讲到了,画布是可以拖拽和缩放的,本质上是修改canvas的transform。

在每次缩放后,canvas会调用renderAll方法,从而调用每个几何的_render方法。在_render内,我们需要重新计算strokeWidth:

const strokeWidth = 5;
const zoom = canvas.getZoom();
this.set({
    strokeWidth: strokeWidth / zoom
});

这样可以保证每次缩放后,线宽依然维持一个固定值。如果我们不修改线宽,则会被同样得缩放。

预告

下一章,我们详细聊一个极其隐蔽的问题:线居中渲染。

上一篇:Vue.js---------Vue基础


下一篇:IDEA连接SqlServer数据库