javascript
<template>
<canvas
id="canvas"
width="1200"
height="800"
style="border: 1px solid #ccc"
/>
</template>
<script>
import { fabric } from 'fabric'
export default {
mounted() {
this.init()
},
methods: {
poitnl(x1, y1, x2, y2, leftwidth, rightWidth) {
// (x1, y1) 和 (x2, y2) 分别为开始点和结束两点坐标 leftwidth 为点1→点2 左侧宽度,rightWidth 为点1→点2 右侧宽度,
const angleRadians = Math.atan2(y2 - y1, x2 - x1)
// 计算左侧和右侧宽度的偏移坐标
const leftOffsetX = leftwidth * Math.cos(angleRadians + Math.PI / 2)
const leftOffsetY = leftwidth * Math.sin(angleRadians + Math.PI / 2)
const rightOffsetX = rightWidth * Math.cos(angleRadians - Math.PI / 2)
const rightOffsetY = rightWidth * Math.sin(angleRadians - Math.PI / 2)
// 构造新的多边形点
const points = {
leftp: [// 左侧绘制偏移点
x1 + leftOffsetX,
y1 + leftOffsetY,
x2 + leftOffsetX,
y2 + leftOffsetY
],
rightp: [ // 右侧绘制偏移点
x2 + rightOffsetX,
y2 + rightOffsetY,
x1 + rightOffsetX,
y1 + rightOffsetY
]
}
return points
},
init() {
const point = [0, 300, 600, 300]
const canvas = new fabric.Canvas('canvas')
const line = new fabric.Line(point, {
stroke: 'green', // 笔触颜色
strokeWidth: 10, // 笔触宽度
hasRotatingPoint: false, // 选中时是否能够旋转
originX: 'center',
originY: 'center',
opacity: 0.6
})
canvas.add(line)
const linel = new fabric.Line(
this.poitnl(point[0], point[1], point[2], point[3], 50, 50).rightp,
{
stroke: 'red', // 笔触颜色
strokeWidth: 100, // 笔触宽度
hasRotatingPoint: false, // 选中时是否能够旋转
originX: 'center',
originY: 'center',
opacity: 0.3
}
)
canvas.add(linel)
}
}
}
</script>
显示效果: