ZRender开发

开发文档：https://ecomfe.github.io/zrender-doc/public/

<!-- eslint-disable no-undef -->
<template><div class="config-page"><div class="header"><el-button @click="handleAdd">撒点</el-button><el-button @click="clearPoints">清除撒点</el-button><el-button @click="drawLines">生产轨迹</el-button><el-button @click="clearLines">清除轨迹</el-button></div><div class="content"><!-- 阻止默认的鼠标右键事件 --><div id="container" @contextmenu.prevent></div><!-- 鼠标悬浮提示 --><div v-show="titleTip" id="tip">{{ titleTip }}</div></div></div>
</template><script>
import * as zrender from 'zrender/dist/zrender'
let container, zr
export default {data() {return {group: null,pointGroup: null,lineGroup: null,bgImg: new URL('../assets/images/1.jpg', import.meta.url).href,isActive: false,pointList: [],pointListNormalization: [],cameraIcon: new URL('../assets/images/camera_n.png', import.meta.url).href,zrBgImg: null,titleTip: '',titleElement: null,index: 1,positionImg: new URL('../assets/images/position.png',import.meta.url).href,posZrImage: null,points: [[400, 400],[450, 450],[450, 500],[500, 500],],currentIndex: 1,}},mounted() {this.init()this.titleElement = document.getElementById('tip')},methods: {// zr => group => zrBgImg + pointGroup + lineGroupinit() {container = document.getElementById('container')// 初始化 ZRenderzr = zrender.init(container)// 创建组this.group = new zrender.Group()zr.add(this.group)this.zrBgImg = new zrender.Image({style: {image: this.bgImg,x: 0,y: 0,width: container.clientWidth,height: container.clientHeight},z: 1,cursor: 'unset',})this.group.add(this.zrBgImg)this.zrBgImg.on('click', (data) => {const { offsetX, offsetY } = datathis.isActive && this.addMarker(offsetX, offsetY)})// 创建组：用于存放监控点this.pointGroup = new zrender.Group()this.group.add(this.pointGroup)// 创建组：用于存放轨迹线this.lineGroup = new zrender.Group()this.group.add(this.lineGroup)this.drawLines1()this.drawLines2()},handleAdd() {this.changeStatus(true)},// 添加标记addMarker(x, y) {const marker = new zrender.Image({style: {image: this.cameraIcon,x: x - 14,y: y - 14,width: 28,height: 28,},z: 3,cursor: 'pointer',id: `id_${this.index}`,name: `camera_${this.index}`})this.pointGroup.add(marker)this.pointListNormalization.push([x / container.clientWidth, y / container.clientHeight])this.pointList.push([x, y])this.index++marker.on('mouseover', (data) => {// 添加鼠标悬浮提示const { target: { name, style: { x, y, width, height } } } = datathis.titleTip = namethis.titleElement.style.left = `${x + width}px`this.titleElement.style.top = `${y + height}px`})marker.on('mouseout', () => {// 隐藏鼠标悬浮提示this.titleTip = ''})marker.on('click', (data) => {console.log(data, data.target.id)})marker.on('contextmenu', (data) => {this.$confirm('是否确定删除？', {confirmButtonText: '确定',cancelButtonText: '取消',}).then(() => {const { target } = datathis.pointGroup.remove(target)}).catch(() => {this.$message({type: 'success',message: '已取消删除!',})})})this.$nextTick(() => {this.changeStatus(false)})},drawLines() {console.log(this.pointListNormalization)// 多边形const polyline1 = new zrender.Polyline({shape: {points: this.pointList,smooth: 0},style: {lineWidth: 5,stroke: '#F7B71F',},z: 2,})this.lineGroup.add(polyline1)const polyline2 = new zrender.Polyline({shape: {points: this.pointList,smooth: 0},style: {lineDash: [10, 10],stroke: '#ffffff', // 描边样式lineWidth: 2,},z: 2,})this.lineGroup.add(polyline2)polyline2.animate('style', true).when(1000, {lineDashOffset: -20,}).start()},drawLines1() {let polyline = new zrender.Polyline({shape: {points: [[100, 100],[150, 150],[150, 200],[300, 300],],smooth: 0,},style: {lineDash: [8, 2],stroke: 'rgba(0,255,253,0.7)', // 描边样式lineWidth: 1,shadowBlur: 10,shadowColor: 'rgba(13,253,240,0.78)',},z: 22,})this.lineGroup.add(polyline)let circle = new zrender.Circle({shape: {cx: 100,cy: 100,r: 2,},style: {fill: '#ffffff',stroke: '#ffffff',shadowBlur: 8,shadowColor: 'rgba(255, 255, 255, 0.5)',},z: 22,})this.lineGroup.add(circle)circle.animate('shape', true).when(1000, {cx: 150,cy: 150,}).when(2000, {cx: 150,cy: 200,}).when(3000, {cx: 300,cy: 300,}).start()},drawLines2 () {// 多边形const polyline1 = new zrender.Polyline({shape: {points: this.points,smooth: 0},style: {lineWidth: 5,stroke: '#F7B71F',},z: 2,})this.lineGroup.add(polyline1)this.posZrImage = new zrender.Image({style: {image: this.positionImg,x: this.points[0][0] - 16,y: this.points[0][1] - 32,width: 32,height: 32,},z: 3,})this.lineGroup.add(this.posZrImage)this.animate()},// 定位图标沿着轨迹运动animate() {this.posZrImage.animate('style', false).when(2000, {x: this.points[this.currentIndex][0] - 16,y: this.points[this.currentIndex][1] - 32,}).start().done(() => {this.currentIndex++if (this.currentIndex < this.points.length) {this.animate()}})},clearPoints() {this.pointGroup.removeAll()// 未知：加上后，removeAll才生效this.changeStatus(false)this.pointList = []this.pointListNormalization = []},clearLines() {this.lineGroup.removeAll()// 未知：加上后，removeAll才生效this.changeStatus(false)},changeStatus(val) {this.isActive = valthis.zrBgImg?.attr({cursor: val ? 'pointer' : 'unset',})}}
}
</script><style lang="scss">
.config-page {width: 100%;height: 100%;padding: 20px;.header {height: 40px;display: flex;align-items: center;}.content {width: 1366px;height: 768px;position: relative;#container {width: 100%;height: 100%;}#tip {position: absolute;border: 1px solid #4d4d4d;background-color: #fff;padding: 4px;z-index: 1;}}
}
</style>