canvas 和 Component 使用中报错
发布于 4 年前 作者 wujun 16453 次浏览 来自 问答

你想反馈一个 Bug 还是 提一个需求?

Bug

如果是 Bug:

* Bug 表现是什么?预期表现是什么?

iOS 真机中调试面板中报错

undefined is not an object (evaluating 'e.canvasId')

* 如何复现?

在 Component 中使用 canvas 绘图,移除组件后报错。

* 提供一个最简复现 Demo

// canvas-id-error.js
/**
 * [@since](/user/since) 20180321 16:33
 * [@author](/user/author) vivaxy
 */
 
Page({
  data: {
    show: true,
  },
  handleToggle() {
    this.setData({ show: !this.data.show });
  },
});
// canvas-id-error.json
{
  "navigationBarTitleText": "canvasId error",
  "usingComponents": {
    "custom-component": "./custom-component/custom-component"
  }
}
<!-- canvas-id-error.wxml -->
<block wx:if="{{show}}">
  <custom-component></custom-component>
</block>
<button bindtap="handleToggle">Toggle canvas</button>
/* canvas-id-error.wxss */
custom-component {
  width: 750rpx;
  height: 750rpx;
  display: block;
}
// custom-component/custom-component.js
/**
 * [@since](/user/since) 20180321 16:35
 * [@author](/user/author) vivaxy
 */
Component({
  attached() {
    this.canvasContext = wx.createCanvasContext('my-canvas-id', this);
    this._render();
  },
  detached() {
    this.canvasContext = null;
  },
  methods: {
    _render() {
      if (!this.canvasContext) {
        return;
      }
      const ctx = this.canvasContext;
      ctx.moveTo(10, 10);
      ctx.lineTo(100, 10);
      ctx.lineTo(100, 100);
      ctx.fill();
      ctx.draw();
    },
  },
});
// custom-component/custom-component.json
{
  "component": true
}
<!-- custom-component/custom-component.wxml -->
<canvas canvas-id="my-canvas-id"></canvas>
/* custom-component/custom-component.wxss */
canvas {
  width: 750rpx;
  height: 750rpx;
  display: block;
}
5 回复

解决了吗,什么原因?

请问这个怎么解决的,我也是报这个错

同样的问题,请问怎么解决的

wechatide://minicode/QIA126mN6SYC

回到顶部