Vue、fabricJS 画布实现自由绘制折线

1

作者GitHub:https://github.com/gitboyzcf 有兴趣可关注

Vue3代码,Vue2相似改吧改吧

前言

Fabric.js

Fabric.js(英文官网)是一个强大而简单的 Javascript HTML5画布库(也就是针对canvas进行的封装操作,使用起来更方便)

Fabric在画布元素的顶部提供交互式对象模型、Fabric还具有SVG到画布(以及画布到SVG)解析器

安装

npm install fabric --save
or
pnpm install fabric --save
or
yarn add fabric --save

实现

请添加图片描述

Demo.vue

<script setup>
import { fabric } from 'fabric'
let canvas = null // 画布实例
let currentPolyline = null // 临时折线
let points = []

// 初始化画布
const init = () => {
  canvas = new fabric.Canvas('c')
  canvas.selectionColor = 'transparent'
  canvas.selectionBorderColor = 'transparent'
  canvas.skipTargetFind = true // 禁止选中
  canvas.on('mouse:down', canvasMouseDown) // 鼠标在画布上按下
  canvas.on('mouse:move', canvasMouseMove) // 鼠标在画布上移动
  canvas.on('mouse:dblclick', canvasMouseDblclick) // 鼠标在画布上双击
}

// 创建折线
const createPolyline = (e) => {
  const currentPoint = e.absolutePointer
  currentPolyline = new fabric.Polyline(
    [
      { x: currentPoint.x, y: currentPoint.y },
      { x: currentPoint.x, y: currentPoint.y }
    ],
    {
      fill: 'transparent',
      stroke: 'red',
      objectCaching: false
    }
  )
  canvas.add(currentPolyline)
}

// 修改当前正在创建的折线
const changeCurrentPolyline = (e) => {
  const currentPoint = e.absolutePointer

  let points = currentPolyline.points

  points.push({
    x: currentPoint.x,
    y: currentPoint.y
  })
  canvas.requestRenderAll()
}

// 折线橡皮带
const changePolylineBelt = (e) => {
  const currentPoint = e.absolutePointer
  let points = currentPolyline.points

  points[points.length - 1].x = currentPoint.x
  points[points.length - 1].y = currentPoint.y

  canvas.requestRenderAll()
}

// 完成折线绘制
const finishPolyline = (e) => {
  const currentPoint = e.absolutePointer
  let points = currentPolyline.points
  points[points.length - 1].x = currentPoint.x
  points[points.length - 1].y = currentPoint.y

  points.pop()
  points.pop()
  // 按需添加自闭合代码
  // if (points[0].x != points[points.length - 1].x && points[0].y != points[points.length - 1].y) {
   	// changeCurrentPolyline({ absolutePointer: { x: points[0].x, y: points[0].y } })
  // }
  canvas.remove(currentPolyline)

  if (points.length > 1) {
    let polyline = new fabric.Polyline(points, {
      stroke: 'red',
      fill: 'transparent'
    })

    canvas.add(polyline)
  }
  currentPolyline = null

  canvas.requestRenderAll()
}

// 鼠标在画布上按下
const canvasMouseDown = (e) => {
  if (currentPolyline === null) {
    createPolyline(e)
  } else {
    changeCurrentPolyline(e)
  }
}

// 鼠标在画布上移动
const canvasMouseMove = (e) => {
  if (currentPolyline) {
    changePolylineBelt(e)
  }
}

// 鼠标在画布上双击
const canvasMouseDblclick = (e) => {
  finishPolyline(e)
}

onMounted(() => {
  init()
})
</script>

<template>
  <div>
    <canvas id="c" width="500" height="470" style="border: 1px solid #ccc"></canvas>
  </div>
</template>






到这里就结束了,后续还会更新 前端 系列相关,还请持续关注!
感谢阅读,若有错误可以在下方评论区留言哦!!!

111

你可以使用Vue.js和OpenLayers库来实现绘制折线并计算折线距离。下面是一个基本的实现示例: 首先,确保你已经安装了Vue.js和OpenLayers依赖: ```bash npm install vue openlayers ``` 然后,在你的Vue组件中,引入OpenLayers和样式表: ```javascript import 'ol/ol.css'; import { Map, View } from 'ol'; import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'; import { OSM, Vector as VectorSource } from 'ol/source'; import { Draw, Modify } from 'ol/interaction'; import { createBox } from 'ol/interaction/Draw'; export default { mounted() { // 创建地图 const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }); // 创建绘制交互 const source = new VectorSource(); const vector = new VectorLayer({ source: source }); map.addLayer(vector); const draw = new Draw({ source: source, type: 'LineString' }); map.addInteraction(draw); // 创建修改交互 const modify = new Modify({ source: source }); map.addInteraction(modify); // 计算折线距离 draw.on('drawend', (event) => { const feature = event.feature; const geometry = feature.getGeometry(); const coordinates = geometry.getCoordinates(); let distance = 0; for (let i = 1; i < coordinates.length; i++) { const coord1 = coordinates[i]; const coord2 = coordinates[i - 1]; distance += getDistance(coord1, coord2); } console.log('折线距离:', distance); }); // 计算两点之间的距离 function getDistance(coord1, coord2) { const dx = coord2[0] - coord1[0]; const dy = coord2[1] - coord1[1]; return Math.sqrt(dx * dx + dy * dy); } } } ``` 在上面的代码中,我们创建了一个地图实例,并添加了一个基本的OSM图层。然后,我们创建了一个矢量图层和一个绘制交互,允许用户绘制线段。在绘制结束时,我们计算折线的距离,并输出到控制台。 注意,我们使用了`ol/ol.css`样式表来确保地图正确显示。你可以根据自己的需求进行样式调整。 最后,在你的Vue模板中,添加一个具有指定ID的容器元素: ```html <template> <div> <div id="map"></div> </div> </template> ``` 这样,当你在浏览器中运行该Vue组件时,你将能够在地图上绘制折线,并计算折线的距离。 希望对你有所帮助!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Thetimezipsby

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值