需求:添加小车图片到画布中, 后端通过ws实时更新小车位置
实际过程中遇到的问题:
- 设置中心点:我想把图片的中心设置为后端传来的坐标点,可以通过设置对象的originX和originY属性来改变对象的旋转和定位基点。
- 让小车永远处于最高级,因为我这个画布有其他图形,例如矩形代表站点的意思,小车经过这个站点,即使这个站点处于被选中状态,也要让小车处于画布最高级。
你可以通过禁用preserveObjectStacking属性来实现
canvas = new fabric.Canvas(canvasRef.value, {
preserveObjectStacking: true
});
在设置小车图像为最高层级时,统一使用canvas.moveTo(object, index)方法,而不是canvas.bringToFront(object)。 index代表了对象的z-index,因此将小车的z-index设置为一个足够大的值可以确保它始终保持在最顶层。
3. 设置图片的大小:可以使用 .scaleToWidth 和 .scaleToHeight 方法来设置图片的大小
4. 在上方过程中,我发现移动过程中,可能会导致图片大小设置失效->解决办法:每次remove旧的图片,添加新的图片重新设置大小
5. 有时候小车在矩形上面,但我想触发点击矩形的事件,会被小车阻挡->解决办法:img.evented = false;
最终代码:
// 添加小车图片
const addCarImg = (point: MousePosition, angle: number) => {
const containsCar = canvas.getObjects().filter((item: any) => item.type === 'img');
if (containsCar.length) {
canvas.remove(containsCar[0]);
}
fabric.Image.fromURL('./image.png', function (img) {
img.scaleToWidth(rectWidth);
img.scaleToHeight(rectWidth);
// 设置初始位置 // 以图片的中心为基点(旋转或定位的基点)originX: 'center', originY: 'center',
img.set({
left: point.x,
top: point.y,
angle,
type: 'img',
originX: 'center',
originY: 'center'
});
img.selectable = false;
// 不允许图片的所有事件
// eslint-disable-next-line spellcheck/spell-checker
img.evented = false;
// 添加图片到画布上
canvas.add(img);
canvas.moveTo(img, Number.MAX_SAFE_INTEGER);
});
};