收藏
回答

canvas设置scale在模拟器有效,真机无效

问题模块
API和组件

这是模拟器效果




这是真机效果



下面是代码:

WXML:

<view class="bg_theme">
  <view class="head_title">生长评价</view>
  <view class="flex-tab">
    <view class="toptab {{currentNavtab==idx ? 'active' : ''}}" wx:for="{{navTab}}" wx:for-index="idx" wx:for-item="itemName" data-idx="{{idx}}" bindtap="switchTab">
      {{itemName}}
    </view>
  </view>
  <view class="canvasView">
    <view class="canvas_bg">
      <canvas canvas-id="mycanvas" class="canvas" />
    </view>
  </view>
  <view class="tipLabel">采用世卫组织儿童生长标准,评价结果仅供参考</view>
</view>

WXSS

.toptab.active{
  font-weight: bold;
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 80rpx;
  /*文字下面加线 border-bottom: solid 3px #ed7321;*/
}
 
.toptab{
  background-color: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 80rpx;
  /* 动画 */
  border-bottom: solid 3px transparent;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s  ease-in-out; /* Firefox 4 */
  -webkit-transition: all 0.4s ease-in-out; /* Safari 和 Chrome */
  -o-transition: all 0.4s  ease-in-out; /* Opera */
}
 
.flex-tab{
  margin: 40rpx;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
 
.canvasView {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
}
 
.canvas_bg {
  background-color: white;
  height: 320px;
  width: 320px;
}
 
.canvas{
  height: 640px;
  width: 640px;
  transform: scale(0.5) translate(-320px, -320px);
}
 
.tipLabel {
  font-size: 8pt;
  margin-top: 10rpx;
  margin-left: 40rpx;
}


JS文件

const ctx = wx.createCanvasContext('mycanvas');
const allWidth = 640;
const ageNum = 5;
const yNum = 5;
const itemLeft = 40;
const itemBottom = 40;
const ageItemWidth = (allWidth - itemLeft) / ageNum;
const ageItemHeight = (allWidth - itemBottom) / yNum;
 
ctx.beginPath(); // 开始创建一个路径,需要调用fill或者stroke才会使用路径进行填充或描边。
ctx.setLineWidth(1);
for (let i = 1; i <= yNum; i++) {// 横线
  ctx.moveTo(itemLeft, ageItemHeight*i);
  ctx.lineTo(allWidth, ageItemHeight*i);
}
for (let i = 0; i < ageNum; i++) {// 竖线

  ctx.moveTo(ageItemWidth*i + itemLeft, 0);

  ctx.lineTo(ageItemWidth*i + itemLeft, allWidth - itemBottom);

}
 
    // 2.画单位
ctx.setFontSize(16);
for(let i=0; i<=yNum; i++){
      ctx.fillText(`${120-i*15}cm`, 0, ageItemHeight * i + 20);
      ctx.fillText(`${i}Years`, ageItemWidth * i, allWidth - 5);
}
     
ctx.drawImage(`/Asset/${isBoy? "boy":"girl"}AgeHeight.png`, itemLeft, 0);
ctx.stroke(); // stroke一次画一次,只是没有显示出来
ctx.draw();


重点是

.canvas{
  height: 640px;
  width: 640px;
  transform: scale(0.5) translate(-320px, -320px);
}

这个设置在真机上无用啊



大神帮忙看看啊


最后一次编辑于  2017-06-19  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 大猩猩
    大猩猩
    2017-06-19

    canvas无法使用css的transform属性,你要是想使用transform相关属性,应该调用cavans的相关方法,scale,translate之类的。

    2017-06-19
    赞同
    回复