Question

我使用 VueJS ，我想将HTML-Canvas与Canvas-Context合并。我想在我的context内拨打components，如：

mounted() {
  this.$c.moveTo(100, 100)
  this.$c.lineTo(200, 200)
}

我从main.js开始使用：

Vue.prototype.$c = document.querySelector('canvas').getContext('2d')

此外，我也不知道如何在以下构造中使用关键字this：

const Something = (x, y) => {
  this.x = x
  this.y = y
  this.draw() {
    this.$c.moveTo(100, 100)
    this.$c.lineTo(200, 200)
  }
}

那么如何组合canvas-context和VueJS？

Answer 1

在创建Vue实例之前，可以像设置一样设置prototype属性（如Adding Instance Properties中所述）。

如this answer中所述，箭头函数不会绑定到this，因此请确保使用非箭头函数。

请勿在实例属性或回调中使用arrow functions（例如vm.$watch('a', newVal => this.myMethod())）。由于箭头函数绑定到父上下文，this将不是您期望的Vue实例，this.myMethod将是undefined。 ¹

请参阅下面的代码段中的示例。单击 draw 按钮在画布上绘制一条线。

//wait for DOM to load
document.addEventListener('DOMContentLoaded', function() {
  //set property on all Vue instances
  Vue.prototype.$c = document.getElementById('myCanvas').getContext('2d');
  //create Vue instance
  var vm = new Vue({
    el: '#example',
    methods: {
      draw: function() {
        this.$c.beginPath();
        this.$c.moveTo(100, 100);
        this.$c.lineTo(200, 200);
        this.$c.stroke();
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<canvas id="myCanvas"></canvas>
<div id="example">
  <button @click="draw">draw</button>
</div>

¹ <子> https://vuejs.org/v2/guide/instance.html#Properties-and-Methods

如何将VueJS + Canvas-Context链接在一起？

1 个答案: