Question

我想在画布上制作很多图片，我可以重绘/旋转/缩放，所以我找到了ECharts的ZRender。该示例将图像插入到画布上，html执行得很好，但我将其放置在vue中。它无法呈现，并且没有错误。感谢您的帮助！

<template>
    <div id="main"></div>
</template>

<script>
    import zrender from 'zrender'

    export default {
      name: "zrender_image",
      data() {
        return {}
      },
      methods: {
        order: function () {
          var zr = zrender.init(document.getElementById('main'));
          for (var i = 0; i < 2; i++) {
            for (var j = 0; j < 2; j++) {
              var image = new zrender.Image({
                position: [i * 500, j * 500],
                scale: [1, 1],
                style: {
                  x: 0,
                  y: 0,
                  image: 'bg.jpg',
                  width: 500,
                  height: 500
                },
                draggable: true
              });
              zr.add(image);
            }
          }
          ;
        },
      },

      mounted() {
        this.order();
      }
    }
</script>
<style scoped>
        html, body, #main {
            width: 100%;
            height: 100%;
        }
</style>

我希望图像可以在主格中绘制。

Answer 1

为什么我不能回答我的问题。我发现他的问题出在图像src中。应该是

src = require("bg.jpg")

我无法在vue项目中使用Echarts Zrender绘制图像，但可以在html中使用

1 个答案: