收藏
回答

canvas 和 Component 使用中报错

问题模块 框架类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 iOS 11.2.6 iPhone 6s 6.6.5

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

Bug


如果是 Bug:


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

iOS 真机中调试面板中报错

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



* 如何复现?

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


* 提供一个最简复现 Demo

// canvas-id-error.js
/**
 * @since 20180321 16:33
 * @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 20180321 16:35
 * @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;
}


最后一次编辑于  2018-03-21  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

5 个回答