如何在VUE中使用fabric.js加载保存在后端‘http://127.0.0.1:8300/media/b002_dimension/b002_08_problemComplain/qd_car_photo/id4/id4_qd_r.png’的图片,并在用户点击图片点某个位置时添加标记点
时间: 2023-08-11 18:05:11 浏览: 53
首先,你需要在Vue项目中安装fabric.js。可以使用以下命令进行安装:
```
npm install fabric --save
```
然后,在Vue组件中引入fabric.js,并创建一个canvas元素来加载图片和添加标记点。你可以使用以下代码:
```javascript
<template>
<div>
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
import fabric from 'fabric';
export default {
mounted() {
const canvas = new fabric.Canvas(this.$refs.canvas);
// 加载图片
fabric.Image.fromURL('http://127.0.0.1:8300/media/b002_dimension/b002_08_problemComplain/qd_car_photo/id4/id4_qd_r.png', function(img) {
canvas.add(img);
canvas.setWidth(img.width);
canvas.setHeight(img.height);
});
// 添加标记点
canvas.on('mouse:down', function(options) {
const pointer = canvas.getPointer(options.e);
const circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 5,
fill: 'red',
selectable: false
});
canvas.add(circle);
});
}
};
</script>
```
这里的代码中,我们首先在mounted生命周期中创建了一个canvas元素,并在其中加载了图片。然后,我们通过监听canvas的mouse:down事件,在用户点击canvas时添加了一个红色的圆形标记点。
请注意,你需要将图片的地址替换为你自己后端存储的图片地址。还要注意,如果图片跨域,可能需要在后端进行相关的配置以允许跨域请求。