需要解决两个问题: 字库cdn无法访问的问题,可以放置在自己的服务器中通过接口查询。canvas中的绘制问题。解决方案: 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'); }
hanzi-writer-miniprogram 按照官方文档指引的代码实现,无法正确看到演示?// 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
05-20