微信扫码登录

其他登录方式

绑定手机号

注册

我同意用户协议

忘记密码

用户协议

绑定手机号

近期有不法分子打着爱盈利的旗号,制作“爱盈利”名称的App,并伪造爱盈利证件,骗取用户信任,以抖音点赞赚钱或其他方式赚钱为名义,过程中以升级会员获得高佣金为名让用户充值。
爱盈利公司郑重声明:我司没有研发或运营过任何名为“爱盈利”的APP,我司做任务赚钱类产品从没有让任何普通用户充值升级会员。我公司产品均在本网站可查询,请将网站拉至底部,点击“关于我们”可查看爱盈利相关产品与服务。
温馨提示:当遇到此类问题请拨打官方电话或添加官方微信,以免财产损失。爱盈利官网地址:www.aiyingli.com。
  • 推广与合作
X

小程序丨canvas设置scale在模拟器有效,真机无效

来源: 5155

这是模拟器效果

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




这是真机效果

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


下面是代码:

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);
}

这个设置在真机上无用啊



大神帮忙看看啊


网友回复:

大***:

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

海***:

这个样式里面去掉scale

.canvas{

  height: 640px;
  width: 640px;

}

然后在JS里面的  ctx.beginPath(); 前面写上  ctx.scale(0.5, 0.5);就ok拉


爱盈利(aiyingli.com)移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者,移动盈利指导。我们的目标是让盈利目标清晰可见!降低门槛,让缺乏经验、资金有限的个人和团队获得经验和机会,提高热情,激发产品。

评论

相关文章推荐

SELECT dw_posts.ID,dw_posts.post_title,dw_posts.post_content FROM dw_posts INNER JOIN dw_term_relationships ON (dw_posts.ID = dw_term_relationships.object_id) WHERE 1=1 AND(dw_term_relationships.term_taxonomy_id = 5246 ) AND dw_posts.post_type = 'post' AND (dw_posts.post_status = 'publish') GROUP BY dw_posts.ID ORDER BY RAND() LIMIT 0, 6

京ICP备15063977号-2 © 2012-2018 aiyingli.com. All Rights Reserved. 京公网安备 11010102003938号