原副标题:化解uniappQQ小流程canvas无法导入内部手写体的难题
细细翻查了uniapp的文件格式,里头提及了两个api
这儿的source要是子网,对准手写体的浏览镜像。 即使我没伺服器,因此我使用了完全免费中文网站代销伺服器。
上面是部份必要性标识符短片
“`export default <{p> components: {},
data() <{p> return <{p> canvasW:0, // 画布宽
canvasH:0, // 画笔高
SystemInfo:{}, // 电子设备重要信息
text:APQ8060,
type:2,
ctx:null,
textPos:[],
fontSize:36,
singleText:,
imgUrl:require(./bg.jpg),
wid:80,
hei:80,
result_img:,
canvasWBig:0, // 画笔宽
canvasHBig:0, // 画笔高,
visible:false,
canvas:null,
showCtx:null,
startDIY:false,
fontFamily:[sans-serif,kaiti,yunfeng,jianhao],
fontUrl:[,https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf,https://my-font-library.pages.dev/yunfeng.ttf,https://my-font-library.pages.dev/jianhao.ttf],
family:sans-serif, //默认
useColorStr:black,
colorBarShow:false,
redShow:false,
greenShow:false,
blackShow:true,
yellowShow:false,
blueShow:false
}
},
“`
“`
setFont(family)<{p> this.family = family
let self = this;
if(family!=sans-serif)<{p> let fontUrl =
if(family===kaiti)<{p> fontUrl = self.fontUrl[1]
}else if(family===yunfeng)<{p> fontUrl = self.fontUrl[2]
}
else if(family===jianhao)<{p> fontUrl = self.fontUrl[3]
}
uni.loadFontFace(<{p> global: true, // 是否全局生效
family: family, // 定义的手写体名称
source: url(“+fontUrl+”), // 手写体资源的地址。建议格式为 TTF 和 WOFF,WOFF2 在低版本的iOS上会不兼容。
success() <{p> console.log(成功的回调函数)
self.family = family
self.ctx.font = self.fontSize+”px “+self.family
console.log(self.ctx.font)
self.showMsg(self.ctx.font)
self.ctx.fillStyle = self.useColorStr;
self.drawNewFont()
},
fail()<{p> console.log(失败的回调函数)
},
complete()<{p> //console.log(接口调用结束的回调函数(调用成功、失败都会执行))
},
scopes: [“webview”, “native”],
})
}else<{p> self.family = family
self.ctx.font = self.fontSize+”px “+self.family
console.log(self.ctx.font)
self.showMsg(self.ctx.font)
self.ctx.fillStyle = self.useColorStr;
self.drawNewFont()
}
},
“`
APP和H5手写体是正常的,不管是用uni.loadFontFace还是用@font-face都可以直接用,就小流程事情多
上面效果图