小程序
小游戏
企业微信
微信支付
扫描小程序码分享
使用canvas画图的时候,要生成一张图片,需要把 canvas隐藏。使用属性hidden=‘true’;(使用接口:wx:canvasToTempFilePath)
真机测试:
安卓:成功生成图片;
iphone 6s:走fail路径,errMsg:‘canvasTo TempFilePath:fail fail’
怎样可以兼容隐藏呢?
8 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
发现一个很好的隐藏canvas的方法~~只需要更改css的属性就可以了。
position:fixed;left:100%;
简直崩溃啊~
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
点个赞,顺便fvck微信团队
为啥我设置position:fixed;left:100%;还是不行,页面左边会多一块白色的canvas布局。
我试了使用position: fixed;left: 9999px;但是只有加载时才有用, 如果初始化left为100px 切换left为0时canvas还在原来的位置上
我好崩溃, 以前用 hidden 隐藏 Canvas 完全好好的,没问题, 线上跑了那么久都能生成. 今天发现突然不能用了, 花了我一天的时间, 从后端到前端都排查了一遍. hidden 了 canvas 图片就是显示不出来....终于解决了
我试了一下,还真的会销毁canvas哦!
那你绘图动作麻不麻烦,如果不麻烦,可以在设置show参数变量值的时候,再重绘一次嘛。
<!--index.wxml-->
<
canvas
canvas-id
=
"myCanvas"
style
"height:100%;width:100%;"
wx:if
"{{show==true}}"
></
>
button
bindtap
"show"
>显示与隐藏</
Page({
data: {
show:
true
,
},
onShow:
function
() {
this
.drawImage();
drawImage:
var
context = wx.createCanvasContext(
'myCanvas'
)
context.setLineWidth(5);
//设置线条宽度
context.setStrokeStyle(
"#F465c6"
);
//设置线条样式
context.setLineCap(
'round'
//设置线条的端点样式 round:圆角
context.setLineJoin(
//设置线条的交点样式 round:圆角
context.moveTo(10, 10);
context.lineTo(100, 100);
context.stroke();
context.draw();
.setData({
show: !
.data.show,
});
if
(
.data.show) {
}
})
wx:if会让canvas销毁,而不是隐藏~~我希望这个组件只是隐藏起来了,但是还是存在的。
我不太明白隐藏画布canvas跟调用wx:canvasToTempFilePath有什么关系。。。
我查了一下canvas,没发现有你说的那个hidden属性,你是不是对canvas使用了CSS样式?其文档最下边的 Bug & Tip 第3条【css 动画对 canvas 组件无效】,或许CSS样式对canvas组件还是有点问题。
至于你想实现隐藏目的,可以换个思路,使用条件控制,比如:
"{{hidden==true}}"
在js页面中控制hidden这个参数变量的值来使得canvas组件出现或隐藏。
要注意的是在设置hidden值的时候,只能使用setData()方法,因为setData()用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值,直接修改 this.data 而不调用 this.setData() 是无法改变页面的状态的,还会造成数据不一致。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
发现一个很好的隐藏canvas的方法~~只需要更改css的属性就可以了。
position:fixed;left:100%;
简直崩溃啊~
点个赞,顺便fvck微信团队
为啥我设置position:fixed;left:100%;还是不行,页面左边会多一块白色的canvas布局。
我试了使用position: fixed;left: 9999px;但是只有加载时才有用, 如果初始化left为100px 切换left为0时canvas还在原来的位置上
我好崩溃, 以前用 hidden 隐藏 Canvas 完全好好的,没问题, 线上跑了那么久都能生成. 今天发现突然不能用了, 花了我一天的时间, 从后端到前端都排查了一遍. hidden 了 canvas 图片就是显示不出来....终于解决了
我试了一下,还真的会销毁canvas哦!
那你绘图动作麻不麻烦,如果不麻烦,可以在设置show参数变量值的时候,再重绘一次嘛。
<!--index.wxml-->
<
canvas
canvas-id
=
"myCanvas"
style
=
"height:100%;width:100%;"
wx:if
=
"{{show==true}}"
></
canvas
>
<
button
bindtap
=
"show"
>显示与隐藏</
button
>
Page({
data: {
show:
true
,
},
onShow:
function
() {
this
.drawImage();
},
drawImage:
function
() {
var
context = wx.createCanvasContext(
'myCanvas'
)
context.setLineWidth(5);
//设置线条宽度
context.setStrokeStyle(
"#F465c6"
);
//设置线条样式
context.setLineCap(
'round'
);
//设置线条的端点样式 round:圆角
context.setLineJoin(
'round'
);
//设置线条的交点样式 round:圆角
context.moveTo(10, 10);
context.lineTo(100, 100);
context.stroke();
context.draw();
},
show:
function
() {
this
.setData({
show: !
this
.data.show,
});
if
(
this
.data.show) {
this
.drawImage();
}
},
})
wx:if会让canvas销毁,而不是隐藏~~我希望这个组件只是隐藏起来了,但是还是存在的。
我不太明白隐藏画布canvas跟调用wx:canvasToTempFilePath有什么关系。。。
我查了一下canvas,没发现有你说的那个hidden属性,你是不是对canvas使用了CSS样式?其文档最下边的 Bug & Tip 第3条【css 动画对 canvas 组件无效】,或许CSS样式对canvas组件还是有点问题。
至于你想实现隐藏目的,可以换个思路,使用条件控制,比如:
<
canvas
canvas-id
=
"myCanvas"
wx:if
=
"{{hidden==true}}"
></
canvas
>
在js页面中控制hidden这个参数变量的值来使得canvas组件出现或隐藏。
要注意的是在设置hidden值的时候,只能使用setData()方法,因为setData()用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值,直接修改 this.data 而不调用 this.setData() 是无法改变页面的状态的,还会造成数据不一致。