操作流程如下:
先save画布,再使用setTextAlign('center')居中绘制文本后,restore,接着绘制其他文本图片,draw上画布,显示正常,然后调用canvasToTempFilePath导出图片,ios上的图片就会出现文字错位。
应该是一个ios上的bug,安卓上没这个问题。
错位图
正常图
现在有个临时解决方案,在使用完成setTextAlign('center')后,再设置回setTextAlign('left'),导出图片就会正常,希望修复~
API/组件名称 | 终端类型 | 微信版本 | 基础库版本 |
---|---|---|---|
setTextAlign | 客户端 | 6.6.1 | 1.6.6 |
10 个回答
已经重现了,我们定位一下,会尽快修复
可以精简个demo给我,麻烦直接贴上来
你好,这个demo代码能否提供一下
你好,感谢反馈,我们会在后续版本中进行修复,另外后续建议通过搜索相关关键字来后在提问,可以提高问题解答的效率。。
mark
好坑。。2018.03.01还没修复
嗯嗯,辛苦,等你们的好消息~
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto:
'Hello World'
,
userInfo: {},
hasUserInfo:
false
,
canIUse: wx.canIUse(
'button.open-type.getUserInfo'
),
screenWH: [],
isBottomShow:
true
},
//事件处理函数
bindViewTap:
function
() {
},
getScreenWH:
function
(callback) {
try
{
var
res = wx.getSystemInfoSync();
var
wh =
this
.data.screenWH;
wh.push(res.windowWidth);
wh.push(res.windowHeight);
if
(callback){
callback();
}
}
catch
(e) {
}
},
onLoad:
function
() {
var
that =
this
;
that.getScreenWH(
function
(){
that.draw();
});
},
draw:
function
(){
var
that =
this
;
var
context = wx.createCanvasContext(
"canvas"
);
//底层画布
context.setFontSize(30);
context.save();
//居中前绘制
context.setFillStyle(
'black'
);
context.fillText(
'Hello'
, 30, 30);
context.restore();
context.save();
//居中绘制
context.setTextAlign(
'center'
);
//居中
context.setFillStyle(
'blue'
);
context.fillText(
'Hello2'
, 30, 100);
// context.setTextAlign('left');//恢复左对齐可以正常显示
context.restore();
context.save();
//居中后绘制
context.setFillStyle(
'red'
);
context.fillText(
'Hello3'
, 30, 60);
context.restore();
context.draw(
false
,
function
(){
wx.canvasToTempFilePath({
canvasId:
'canvas'
,
success:
function
(res) {
setTimeout(
function
() {
//隐藏底层画布
that.setData({
isBottomShow:
false
});
var
ctx = wx.createCanvasContext(
"canvas_above"
);
//覆盖在上层的画布
ctx.drawImage(res.tempFilePath, 0, 0, that.data.screenWH[0], that.data.screenWH[1]);
ctx.draw();
}, 5 * 1000);
}
});
});
}
})
<!--index.wxml-->
<
view
class
=
"container"
>
<
view
class
=
"userinfo"
style
=
'display:none'
>
<
button
wx:if
=
"{{!hasUserInfo && canIUse}}"
open-type
=
"getUserInfo"
bindgetuserinfo
=
"getUserInfo"
> 获取头像昵称 </
button
>
<
block
wx:else>
<
image
bindtap
=
"bindViewTap"
class
=
"userinfo-avatar"
src
=
"{{userInfo.avatarUrl}}"
background-size
=
"cover"
></
image
>
<
text
class
=
"userinfo-nickname"
>{{userInfo.nickName}}</
text
>
</
block
>
</
view
>
<
view
class
=
"usermotto"
style
=
'display:none'
>
<
text
class
=
"user-motto"
>{{motto}}</
text
>
</
view
>
<
canvas
class
=
'canvas'
canvas-id
=
'canvas'
style
=
'{{isBottomShow ? "display:block;" : "display:none;"}}'
>
</
canvas
>
<
canvas
class
=
'canvas above'
canvas-id
=
'canvas_above'
>
</
canvas
>
</
view
>
/**index.wxss**/
.userinfo {
display
: flex;
flex-
direction
: column;
align-items:
center
;
}
.userinfo-avatar {
width
:
128
rpx;
height
:
128
rpx;
margin
:
20
rpx;
border-radius:
50%
;
}
.userinfo-nickname {
color
:
#aaa
;
}
.usermotto {
margin-top
:
200px
;
}
.container {
height
:
100%
;
position
:
relative
;
display
: flex;
flex-
direction
: column;
align-items:
center
;
justify-
content
: space-between;
box-sizing: border-box;
}
page{
width
:
100%
;
height
:
100%
;
}
.canvas{
width
:
100%
;
height
:
100%
;
padding
:
0
;
margin
:
0
;
position
:
absolute
;
left
:
0
;
top
:
0
;
}
.
above
{
z-index
:
10000
;
}
全部的demo代码,麻烦看一下,辛苦~
有类似问题的demo我也有一个,怎么给你呢?
这个问题是我在项目开发的时候碰到的,不是demo诶