收藏
回答

【bug】canvas切换上下文后只渲染部分数据

问题模块 框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 canvas 微信iOS客户端 6.6.2 1.9.1


cs1:



cs2:



cs1经过switch后:



cs2经过switch后:



采用wepy框架,下面是测试代码

.hide{
 display: none;
}
.show{
 display: block;
 background-color: #fff;
}


<template lang="wxml">
 <canvas canvas-id="cs1" class="{{ id === 'cs1' ? 'show' : 'hide' }}" style="{{ style }}">canvas>
 <canvas canvas-id="cs2" class="{{ id === 'cs2' ? 'show' : 'hide' }}" style="{{ style }}">canvas>
 <button bindtap="switch">switchbutton>
 <button bindtap="clear">clearbutton>
 <button bindtap="paint">paintbutton>
template>


<script></script>
 import wepy from 'wepy'
 let systemInfo = wepy.getSystemInfoSync()
 const maxWhiteBoardWidth = 20000
 const maxWhiteBoardHeight = 15000
 let minWhiteBoardWidth = systemInfo.windowWidth
 let minWhiteBoardHeight = systemInfo.windowWidth * 0.75
 // private function
 function transitionX (x) {
   let val = ((x * minWhiteBoardWidth) / maxWhiteBoardWidth)
   return val
 }
 // private function
 function transitionY (y) {
   let val = ((y * minWhiteBoardHeight) / maxWhiteBoardHeight)
 return val
 }
 function line (ctx, lines, color, size) {
   ctx.setLineJoin('round')
   ctx.setLineCap('round')
   ctx.setStrokeStyle(color)
   ctx.setLineWidth(size)
   ctx.beginPath()
   let fromX = transitionX(lines[0].x)
   let fromY = transitionY(lines[0].y)
   ctx.moveTo(fromX, fromY)
   for (let i=1; i<lines.length;i++) {
     let line = lines[i]
     let x = transitionX(line.x)
     let y = transitionY(line.y)
     ctx.lineTo(x, y)
   }
   ctx.stroke()
   ctx.closePath()
   ctx.draw(true)
 }
 export default class Test extends wepy.component{
   computed = {
     style () {
       let systemInfo = wepy.getSystemInfoSync()
       return 'width: 100%;' +
              `height: ${(systemInfo.windowWidth * 0.75) * 2}rpx;` +
              'overflow: hidden;' +
              'background-color: #fff;' +
              'margin: 0 auto;'
     }
   }
   
   data = {
     id: 'cs1',
     ctx: null
   }
   methods = {
     switch ()  {
       this.id === 'cs1' ? this.id = 'cs2' : this.id = 'cs1'
     },
     clear () {
       this.ctx.clearRect(0, 0, 999, 999)
       this.ctx.draw(true)
     },
     paint () {
       console.log('id: ', this.id)
       paintData[this.id].map((item) => {
         console.log('item: ', item)
         line(this.ctx, item.paintData.paintStream.points, 'red', 2)
       })
     }
   }
   createCtx () {
     this.ctx = wepy.createCanvasContext(this.id)
   }
   onLoad () {
     this.createCtx()
   }
   watch = {
     id (val) {
       this.id = val
       this.createCtx()
     }
   }
 }


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