#vue #react #zrender #canvas #auto-drawing

使用 auto-drawing 画一个户型图

auto-drawing 官方文档

基于 vue 环境

安装

1
yarn add  auto-drawing

代码

room.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<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

官方文档

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

#vue #react #zrender #canvas #auto-drawing