使用 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 画一个户型图相关推荐

请问怎么用python画一个轮廓图，，例如中国地图这种，注意是轮廓图，求大佬指点
请问怎么用python画一个轮廓图,,例如中国地图这种,注意是轮廓图例如这个:
使用 auto-drawing 画一个鱼骨图
使用 auto-drawing 画一个鱼骨图 auto-drawing 官方文档基于 vue 环境安装 yarn add auto-drawing 代码 fishbone.vue <temp ...
如何用Apache POI操作Excel文件-----如何用Apache POI 画一个离散图
有的时候,我们需要Excel中的数据,通过一个图画,可视化的表现出来. 那么这个时候,应该如何做呢?现在就借花献佛,以Apache POI自己提供的一个例子为例,给大家演示一下POI的API 如何画图 ...
使用canvas和JavaScript画一个阴阳图
主要函数: 函数名用法说明 arc() Canvas.arc(0,0,20,0,2*Math.PI,false);arc参数:坐标点,半径,起始角度,结束角度,逆时针(默认). 画圆 stroke ...
陷阱房图纸_揭秘户型图 | 研究了100个户型图后，我发现了这4个重大陷阱
案例一:谁动了我的厨房? 顾大妈买房的时候,觉得这个户型各个空间都大,据说也是什么动静分区.干湿分区的.本来觉得厨房挺大的,长有3.8米,宽有1.8米.交房装修的时候,发现了问题,能装橱柜的地方太少了 ...
python简单代码画曲线图教程-用Python画论文折线图、曲线图？几个代码模板轻松搞定！...
前言这几天在搞论文图,唉说实话抠图这种东西真能逼死人.坐在电脑前抠上一天越看越丑,最后把自己丑哭了-- 到了画折线图分析的时候,在想用哪些工具的时候.首先否决了excel,读书人的事,怎么能用exc ...
python画折线图代码-用Python画论文折线图、曲线图？几个代码模板轻松搞定！
前言这几天在搞论文图,唉说实话抠图这种东西真能逼死人.坐在电脑前抠上一天越看越丑,最后把自己丑哭了-- 到了画折线图分析的时候,在想用哪些工具的时候.首先否决了excel,读书人的事,怎么能用exc ...
python画简便的图-最适合小白学的花色玩Python折线图|画个天气预报
原标题:最适合小白学的花色玩Python折线图|画个天气预报欢迎关注天善智能 hellobi.com,我们是专注于商业智能BI,大数据,数据分析领域的垂直社区,学习.问答.求职,一站式搞定! 对商业 ...
matlab 4维图读取,Matlab或mathmatica画4维图问题
现在有4维数据(不是解析表达式),想画一个三维图,函数值以颜色表示第4维,请问用Matlab或mathmatica怎么样实现?(不是散点图或切片图,画成表面图),先谢过了,如能现实必追加金币.4维数据 ...

使用 auto-drawing 画一个户型图

使用 auto-drawing 画一个户型图

安装

代码

效果

官方文档

使用 auto-drawing 画一个户型图相关推荐

最新文章

热门文章