使用 auto-drawing 畫一個戶型圖

auto-drawing 官方文檔

基于 vue 環境

安裝

yarn add auto-drawing

代碼

room.vue

<template><div class="container"><div ref="mainElementRef" class="main"></div></div> </template><script lang="ts" setup> import { onBeforeUnmount, onMounted, reactive, ref } from 'vue' import {createCanvas,createGroup,renderCanvas,ZRenderGroup,ZRenderType,disposeCanvas,ShapeCoreType } from 'auto-drawing' import axios from 'axios'type Nullable<T> = T | nullinterface IState {zr: Nullable<ZRenderType>group: Nullable<ZRenderGroup>loading: boolean }/*** 生成圓弧* @param cx* @param cy* @param params* @returns*/ const getCircle = (cx: number,cy: number,r: number,startAngle: number,endAngle: number ) => ({type: 'arc',cx: cx,cy: cy,startAngle,endAngle,r,fill: 'none',stroke: 'green',zlevel: 1 })/*** 生成直線* @param x1* @param y1* @param x2* @param y2* @returns*/ const getLine = (x1: number,y1: number,x2: number,y2: number,stroke = '#fff' ) => ({type: 'line',x1,y1,x2,y2,stroke,fill: '#fff' })/*** 生成文字* @param x* @param y* @param text* @returns*/ const getText = (x: number, y: number, text: string) => ({type: 'text',x,y,text: text,fontSize: 6,fontWeight: 400,stroke: '#fff',fill: '#fff',zlevel: 10 })const state = reactive<IState>({ zr: null, group: null, loading: true }) const mainElementRef = ref<any>(null)const width = 670 const height = 400 const rate = 60const baseOptions = { x: 160, y: height - 40 } onMounted(() => {state.zr = createCanvas(mainElementRef.value, {width,height})state.group = createGroup(baseOptions)axios.get('https://xf-1252186245.cos.ap-chengdu.myqcloud.com/room1.json').then(res => {const data = res.data.dataconst shapeData = data.map((item: any) => {if (item['名稱'] === '直線') {const x1 = Number(item['起點X']) / rateconst y1 = -Number(item['起點Y']) / rateconst x2 = Number(item['端點X']) / rateconst y2 = -Number(item['端點Y']) / rateconst layout = item['圖層']const color: Record<string, string> = {標注: 'red','0': 'yellow',墻線: '#fff',軸線: 'green',樓梯: '#ccc',門窗: '#eee'}const stroke = color[layout] || '#fff'return getLine(x1, y1, x2, y2, stroke)}if (item['名稱'] === '圓弧') {const cx = Number(item['中心X']) / rateconst cy = -Number(item['中心Y']) / rateconst r = Number(item['半徑']) / rateconst startAngle = Number(item['起點角度'])const endAngle = startAngle + Number(item['總角度'])return getCircle(cx, cy, r, startAngle, endAngle)}if (item['名稱'] === '多行文字') {const x = Number(item['位置X']) / rateconst y = -Number(item['位置Y']) / rateconst text = item['內容']return getText(x, y, text)}return {}}) as ShapeCoreType[]const filterShapeData = shapeData.filter(item => item.type)renderCanvas(state.zr as ZRenderType,state.group as ZRenderGroup,filterShapeData,{translate: true,scale: true})state.loading = false}) })onBeforeUnmount(() => {disposeCanvas(state.zr as ZRenderType) }) </script><style scoped> .container {padding: 40px;background: #000;box-sizing: border-box;overflow: hidden; } </style>

效果

https://l-x-f.github.io/auto-drawing-doc/example/example.html#%E6%88%B7%E5%9E%8B%E5%9B%BE-2

官方文檔

官方文檔 https://l-x-f.github.io/auto-drawing-doc/

總結

以上是生活随笔為你收集整理的使用 auto-drawing 画一个户型图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。