zrender-polygon.vue

zrender-polygon.vue

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as zrender from 'zrender'
import { ElMessage } from 'element-plus'

const renderRef = ref<HTMLDivElement>()

const start = () => {
  if (!renderRef.value) return
  const zr = zrender.init(renderRef.value, {
    renderer: 'svg',
  })
  const polygon1 = new zrender.Polygon({
    shape: {
      points: [
        [0, 0],
        [150, 0],
        [150, 150],
        [0, 150],
      ],
    },
    style: {
      fill: 'blue',
    },
  })
  const polygon2 = new zrender.Polygon({
    shape: {
      points: [
        [0, 150],
        [150, 150],
        [150, 0],
        [300, 0],
        [300, 300],
        [0, 300],
      ],
    },
    style: {
      fill: 'red',
    },
  })

  polygon1.on('click', evt => {
    ElMessage.success('点击了多边形1')
    evt.stop()
  })
  polygon2.on('click', evt => {
    ElMessage.success('点击了多边形2')
    console.log({ evt })
    // disable bubble
    evt.cancelBubble = true
    evt.stop()
  })
  polygon2.on('contextmenu', evt => {
    const { clientX, clientY } = evt.event as MouseEvent
    console.log({ evt, clientX, clientY })
    ElMessage.warning(`右键点击了多边形2, x坐标为${clientX}, y坐标为${clientY}`)
    evt.stop()
  })

  zr.on('click', () => {
    ElMessage.success('点击了画布')
  })

  zr.add(polygon1)
  zr.add(polygon2)
}

onMounted(() => {
  start()
})
</script>

<template>
  <div class="w-screen h-screen flex justify-center items-center">
    <div
      ref="renderRef"
      class="w-800px h-300px border border-dashed border-indigo"
    />
  </div>
</template>