使用 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 | null
interface 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 = 60
const 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.data
const shapeData = data.map((item: any) => {
if (item['名称'] === '直线') {
const x1 = Number(item['起点X']) / rate
const y1 = -Number(item['起点Y']) / rate
const x2 = Number(item['端点X']) / rate
const y2 = -Number(item['端点Y']) / rate
const 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']) / rate
const cy = -Number(item['中心Y']) / rate
const r = Number(item['半径']) / rate
const startAngle = Number(item['起点角度'])
const endAngle = startAngle + Number(item['总角度'])
return getCircle(cx, cy, r, startAngle, endAngle)
}
if (item['名称'] === '多行文字') {
const x = Number(item['位置X']) / rate
const y = -Number(item['位置Y']) / rate
const 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