// index.js
// 获取应用实例
import createHanziWriterContext from 'hanzi-writer-miniprogram';
Page({
onLoad: function() {
this.writerCtx = createHanziWriterContext({
id: 'hz-writer',
character: '人',
page: this,
});
// You can call any normal HanziWriter method here
this.writerCtx.loopCharacterAnimation();
}
});
<!--index.wxml-->
<view class="container">
<hanzi-writer-view id="hz-writer" width="300" height="300" />
</view>
// app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"usingComponents": {
"hanzi-writer-view": "hanzi-writer-miniprogram/hanzi-writer-view"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
按照上述三个文件标签演示的效果，并没有看到动画正常渲染，console输出看起来都是正常的
调试基础库版本：2.30.4
需要解决两个问题：
解决方案：
1.1 修改index.js中的字库请求地址到自己的服务器地址。可以使用我的临时地址：
var getCharDataUrl = function getCharDataUrl(char) { return 'https://wxapi.db101.cn/v1/hz/search/' + encodeURIComponent(char); }; 2.1 参考的另外一篇文章，修改RenderTarget方法 function RenderTarget(view) { _classCallCheck(this, RenderTarget); this.view = view; this.eventEmitter = new _EventEmitter2.default(); const query = this.view.createSelectorQuery() query.select('#writer-canvas', view).fields({ node: true, size: true }) .exec((res) => { this.canvas = res[0].node const dpr = wx.getSystemInfoSync().pixelRatio this.canvas.width = res[0].width * dpr this.canvas.height = res[0].height * dpr this.ctx = this.canvas.getContext('2d') this.ctx.scale(dpr, dpr) }) this.ctx = polyfillCanvasCtx(wx.createCanvasContext('writer-canvas', view)); this.canvas = this.view.selectComponent('#writer-canvas'); }解决了吗？