zrender(Zlevel Render) 是一个轻量级的Canvas类库，绘制直线是很简单的事情，但是绘制中垂线还需借助到数学知识「三角函数」。

y ^

| B(x1, y1)

| /┆

| / ┆

| / ┆

| / ┆

|/----┼----+ F

/ C ＼┆

/| ┆＼D

/ | ┆

——————————/——+—————┼———+————————> x

/ |O ┆ E

/ | ┆

/_____|_____┆

A(x, y) | G

|

设平面坐标系 xoy 中，有线段 A(x, y)、B(x1, y1)，计算出垂直于 AB 线段中点 C 上一侧的长度为 n 的线段 CD 两端点坐标

1：算出线段 AB 的长度：

2：算出中点 C 的坐标：

3：设过坐标原点 o 的长度为 n 的线段 OE，在 x 轴的正坐标上，则两点坐标为：O(0, 0)，E(n, 0)

4：将 OE 平移至 C 点且 O 与 C 重合，得到 CF，则 F 点的坐标为：xf = n + xc; yf = yc

5：运用三角函数，计算各个角的关系

6：线段 AB 与 x 轴的夹角：

；

7：通过三角函数关系可计算，XY平面中一点(x1,y1)经圆周旋转θ角度，得到点(x2,y2)，公式如下

8：将 F 点经圆周旋转 ∠FCD 之后，得到 D 点

实现代码：

/**

* 绊线

* @ start[ ] 开始点坐标

* @ end[ ] 结束点坐标

* @ direction[ ] 箭头方向坐标(以一个点的坐标代替)

* @ around `(String)` 箭头包围方式：single - 单侧；double - 双侧

*

* @return

* 当 around 为 "single" 时，在绘制结束后，取 `shape.site` 可得到箭头在线段的哪一侧；

* 返回 "left" 或 "right"

*/

var TripWire = zrender.Path.extend({

type: 'TripWire',

shape: {

start: [0, 0],

end: [0, 0],

direction: [0, 0],

around: 'single', // or double, set the arrow site, single is left or right on the line, double is on the left and right

side: null

},

style: {

stroke: '#000',

fill: 'rgba(0, 0, 255, 0.2)'

},

buildPath: function (ctx, shape) {

// 起点坐标

var x1 = shape.start[0]

var y1 = shape.start[1]

// 终点坐标

var x2 = shape.end[0]

var y2 = shape.end[1]

// 方向坐标(单向有效)

var x3 = shape.direction[0]

var y3 = shape.direction[1]

ctx.moveTo(x1, y1)

ctx.lineTo(x2, y2)

// console.log("线段坐标", x1, y1, x2, y2)

console.log(shape.side)

if (!shape.side || shape.side == null || (shape.side !== 'left' && shape.side !== 'right')) {

// 计算箭头所在线段哪一侧，先计算一个点相对线段的向量，>0 左侧，<0 右侧，=0 线上

var vector = (x1 - x3) * (y2 - y3) - (y1 - y3) * (x2 - x3)

console.log(vector)

// 返回箭头所在方位

if (shape.around === 'single') {

if (vector < 0) {

shape.site = 'left'

} else {

shape.site = 'right'

}

}

} else {

shape.site = shape.side

}

// console.log("向量", vector);

// TODO

/**

* y ^

* | B(x1, y1)

* | /┆

* | / ┆

* | / ┆

* | / ┆

* |/----┼----+ F

* / C ＼┆

* /| ┆＼D

* / | ┆

* ——————————/——+—————┼———+————————> x

* / |O ┆ E

* / | ┆

* /_____|_____┆

* A(x, y) | G

* |

*

* 设平面坐标系 xoy 中，有线段 A(x, y)、B(x1, y1)，计算出垂直于 AB 线段中点 C 上一侧的长度为 n 的线段 CD 两端点坐标

* _________________________

* 1：算出线段 AB 的长度：|AB| = √ (x - x1)^2 + (y - y1)^2

*

* 2：算出中点 C 的坐标：xc = x1 + (x - x1) / 2; yc = y1 + (y - y1) / 2

*

* 3：设过坐标原点 o 的长度为 n 的线段 OE，在 x 轴的正坐标上，则两点坐标为：O(0, 0)，E(n, 0)

*

* 4：将 OE 平移至 C 点且 O 与 C 重合，得到 CF，则 F 点的坐标为：xf = n + xc; yf = yc

*

* 5：运用三角函数，计算各个角的关系

*

* 6：线段 AB 与 x 轴的夹角：sin(∠BAG) = sin(∠BCF) = cos(∠FCD) = BG/AB;

* cos(∠BAG) = cos(∠BCF) = sin(∠FCD) = AG/AB

*

* 7：通过三角函数关系可计算，XY平面中一点(x1,y1)经圆周旋转θ角度，得到点(x2,y2)，公式如下

* x2 = x1 * cos(θ) - y1 * sin(θ)

* y2 = x1 * sin(θ) + y1 * cos(θ)

*

* 8：将 F 点经圆周旋转 ∠FCD 之后，得到 D 点

*

*/

// 线段长度

var ABLength = Math.abs(Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)))

// console.log("leng", ABLength);

// 线段中心点

var center_x1 = (x2 - x1) / 2 + x1

var center_y1 = (y2 - y1) / 2 + y1

// console.log("center", center_x1, center_y1);

// 设长度为100px的线段 OE 经过坐标原点，且 O 点在坐标原点上，E点在 x 轴正坐标上，则这两点的坐标如下

var xO = 0

var yO = 0

var xE = 20

var yE = 0

// 箭头两个角的点：a, b

/**

* ∧

* a/__\ b

* ||

* ||

*/

var xArrowAngle_1 = xE - 5

var yArrowAngle_1 = yE + 3

var xArrowAngle_2 = xE - 5

var yArrowAngle_2 = yE - 3

// 设线段为直角三角形的斜边，则两条直角边长度为

var xLength = Math.abs(x1 - x2)

var yLength = Math.abs(y1 - y2)

// console.log("边长", xLength, yLength);

// 判断线段方向【注意，在此处坐标系为屏幕坐标系，Y 轴应与普通平面坐标系反向，即从上到下为正向】

// 计算线段与 x 轴的夹角三角函数

var cosAngle = yLength / ABLength

var sinAngle = xLength / ABLength

if (x1 < x2 && y1 < y2) {

// 左上到右下 ↘

sinAngle = -sinAngle

} else if (x1 > x2 && y1 > y2) {

// 右下到左上 ↖

sinAngle = -sinAngle

} else if (x1 < x2 && y1 > y2) {

// 左下到右上 ↗

} else if (x1 > x2 && y1 < y2) {

// 右上到左下 ↙

}

// console.log("三角", cosAngle, sinAngle);

// 将 OE 进行旋转得到 OF

var xF = xE * cosAngle - yE * sinAngle

var yF = xE * sinAngle + yE * cosAngle

// 旋转箭头的两个角

var xArrowAngle_1_B = xArrowAngle_1 * cosAngle - yArrowAngle_1 * sinAngle

var yArrowAngle_1_B = xArrowAngle_1 * sinAngle + yArrowAngle_1 * cosAngle

var xArrowAngle_2_B = xArrowAngle_2 * cosAngle - yArrowAngle_2 * sinAngle

var yArrowAngle_2_B = xArrowAngle_2 * sinAngle + yArrowAngle_2 * cosAngle

// console.log("旋转", xO, yO, xF, yF);

// 将 OF 平移至线段中心点，且 O 点与中心点重合，则新的线段坐标如下

xO = center_x1

yO = center_y1

xF = center_x1 + xF

yF = center_y1 + yF

// console.log("move OE", xO, yO, xF, yF);

// 平移箭头的两个角

xArrowAngle_1_B = center_x1 + xArrowAngle_1_B

yArrowAngle_1_B = center_y1 + yArrowAngle_1_B

xArrowAngle_2_B = center_x1 + xArrowAngle_2_B

yArrowAngle_2_B = center_y1 + yArrowAngle_2_B

if (shape.around === 'double') {

// 双向画线，先画第一侧

ctx.moveTo(xO, yO)

ctx.lineTo(xF, yF)

ctx.lineTo(xArrowAngle_1_B, yArrowAngle_1_B)

ctx.lineTo(xArrowAngle_2_B, yArrowAngle_2_B)

ctx.lineTo(xF, yF)

}

// 计算 F 点在线段的哪一侧，是否和光标点击点位于同一侧，或者双向画箭头

var vectorF = (x1 - xF) * (y2 - yF) - (y1 - yF) * (x2 - xF)

// if ((vector > 0 && vectorF < 0) || (vector < 0 && vectorF > 0) || shape.around == "double") {

if ((shape.site === 'right' && vectorF < 0) ||

(shape.site === 'left' && vectorF > 0) ||

shape.around === 'double') {

// 不同侧，旋转Angle之后再旋转180°

xF = xE * cosAngle - yE * sinAngle

yF = xE * sinAngle + yE * cosAngle

// 因为 sin(180) = 0; cos(180) = -1; 所以此处直接简写

xF = -xF

yF = -yF

xF = center_x1 + xF

yF = center_y1 + yF

// 旋转箭头的两个角

xArrowAngle_1_B = xArrowAngle_1 * cosAngle - yArrowAngle_1 * sinAngle

yArrowAngle_1_B = xArrowAngle_1 * sinAngle + yArrowAngle_1 * cosAngle

xArrowAngle_2_B = xArrowAngle_2 * cosAngle - yArrowAngle_2 * sinAngle

yArrowAngle_2_B = xArrowAngle_2 * sinAngle + yArrowAngle_2 * cosAngle

xArrowAngle_1_B = center_x1 - xArrowAngle_1_B

yArrowAngle_1_B = center_y1 - yArrowAngle_1_B

xArrowAngle_2_B = center_x1 - xArrowAngle_2_B

yArrowAngle_2_B = center_y1 - yArrowAngle_2_B

}

// 画线

ctx.moveTo(xO, yO)

ctx.lineTo(xF, yF)

ctx.lineTo(xArrowAngle_1_B, yArrowAngle_1_B)

ctx.lineTo(xArrowAngle_2_B, yArrowAngle_2_B)

ctx.lineTo(xF, yF)

}

})