zrender在uniapp上给rect绑定单击事件

在uniapp中使用zrender给rect绑定单击事件，可以在zrender实例的init事件中绑定click事件。需要注意的是，在rect图形上单击时，需要判断鼠标点击的位置是否在rect内部。可以使用zrender提供的contain方法来判断。以下是一个示例代码：

<template>
  <view class="container">
    <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>
  </view>
</template>

<script>
import zrender from 'zrender';

export default {
  data() {
    return {
      zr: null
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.zr = zrender.init(this.$refs.myCanvas);

      // 创建一个rect图形
      const rect = new zrender.Rect({
        shape: {
          x: 100,
          y: 100,
          width: 100,
          height: 100
        },
        style: {
          fill: '#f00'
        }
      });

      // 绑定click事件
      rect.on('click', (event) => {
        // 判断鼠标点击的位置是否在rect内部
        if (rect.contain(event.offsetX, event.offsetY)) {
          console.log('rect clicked');
        }
      });

      // 将rect添加到zrender实例中
      this.zr.add(rect);
    }
  }
}
</script>

在上面的代码中，我们创建了一个红色的rect图形，并给它绑定了click事件。在click事件中，我们通过contain方法判断鼠标点击的位置是否在rect内部，如果是则打印出'rect clicked'。最后将rect添加到zrender实例中即可。