解决uniapp微信小程序canvas不能引入外部字体的问题

2022-11-25 0 502

原副标题:化解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都可以直接用,就小流程事情多

上面效果图

解决uniapp微信小程序canvas不能引入外部字体的问题解决uniapp微信小程序canvas不能引入外部字体的问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务