个人中心 | 微信开放社区

this.CalculateText=function(text,width)     {         var aryText=[];         var outText='';         var word=null,preWord=null;         for(var i=0;i<text.length;++i)         {             word=text[i];             if (word=='\r') //换行             {                 aryText.push(outText);                 outText = '';             }             else if (word=='\n')             {                 if (preWord!='\r')  //\r\n 不处理                 {                     aryText.push(outText);                     outText = '';                 }             }             else             {                 outText+=text[i];                 var textWidth = this.Canvas.measureText(outText).width;                 if (textWidth>=width)                 {                     aryText.push(outText);                     outText='';                 }             }             preWord = word;         }         if (outText.length > 0) aryText.push(outText);         console.log(aryText)         return aryText;     }

canvas绘图文字换行，第一行文字少计算一个字宽度

[代码]/**[代码][代码] [代码][代码]* 绘制多行文本[代码][代码] [代码][代码]* @param ctx canvas对象[代码][代码] [代码][代码]* @param str 文本[代码][代码] [代码][代码]* @param leftWidth 距离左侧的距离[代码][代码] [代码][代码]* @param initHeight 距离顶部的距离[代码][代码] [代码][代码]* @param titleHeight 文本行高[代码][代码] [代码][代码]* @param canvasWidth 文本区宽度[代码][代码] [代码][代码]* @returns {*}[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]drawText: [代码][代码]function[代码] [代码](ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {[代码][代码] [代码][代码]let lineWidth = 0;[代码][代码] [代码][代码]let lastSubStrIndex = 0; [代码][代码]//每次开始截取的字符串的索引[代码][代码] [代码][代码]for[代码] [代码](let i = 0; i < str.length; i++) {[代码][代码] [代码][代码]lineWidth += ctx.measureText(str[i]).width;[代码][代码] [代码][代码]if[代码] [代码](lineWidth > canvasWidth) {[代码][代码] [代码][代码]ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); [代码][代码]//绘制截取部分[代码][代码] [代码][代码]initHeight += titleHeight; [代码][代码] [代码][代码]lineWidth = 0;[代码][代码] [代码][代码]lastSubStrIndex = i;[代码][代码] [代码][代码]}[代码][代码] [代码][代码]if[代码] [代码](i == str.length - 1) { [代码][代码]//绘制剩余部分[代码][代码] [代码][代码]ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码] [代码][代码]},[代码][代码] [代码][代码]onLoad: [代码][代码]function[代码] [代码](options) {[代码][代码] [代码][代码]const ctx = wx.createCanvasContext([代码][代码]'scene'[代码][代码]);[代码][代码] [代码][代码]const canvasWidth = 300;[代码][代码] [代码][代码]const canvasHeight = 400;[代码][代码] [代码][代码]const bgColor= [代码][代码]'#577C8A'[代码][代码];[代码][代码] [代码][代码]//开始绘制背景区[代码][代码] [代码][代码]ctx.setFillStyle(bgColor)[代码][代码] [代码][代码]ctx.fillRect(0, 0, canvasWidth, canvasHeight)[代码][代码] [代码][代码]//开始绘制文字区[代码][代码] [代码][代码]ctx.setFontSize(18);[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'#fff'[代码][代码]);[代码][代码] [代码][代码]let str = [代码][代码]'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'[代码][代码];[代码][代码] [代码][代码]this[代码][代码].drawText(ctx, str, 50, 200, 22, 200);[代码][代码]// 调用行文本换行函数[代码] [代码] [代码][代码]ctx.draw()[代码][代码]},[代码]用canvas做文本换行的时候第一行的长度总是少了一个字的宽度呢？

2019-02-22

先下载图片到临时目录，然后用本地图片来绘制才可以。网络路径图片真机绘不出来。这个画布就是个太监版的，阉割了很多功能的。

canvas绘制，图片在真机上不显示

- 当前 Bug 的表现（可附上截图） [图片] - 预期表现 - 复现路径 - 提供一个最简复现 Demo 在开发环境都可以显示图片，但是在真机测试中，图片无法显示，这个是怎么回事呢？ canvas绘制出现问题了吗？

2019-02-21

分固定的画图 + 动态的画图。先画固定的画图，画完保存为临时图片文件（wx.canvasToTempFilePath），然后定时器里画的时候先把前面保存的图片贴上去（CanvasContext.drawImage），再画动态的部分。

canvas重绘卡顿

小程序真机上面不支持requestAnimationFrame，但是可以在微信开发者工具上面运行requestAnimationFrame，没办法就改成 setTimeout去绘制canvas，但是绘制几次后就会严重掉帧...有没有什么其它好的解决方案或者建议啊...实在是没办法定位到问题

2019-02-21

把for里面的提出来做成一个函数， i 作为参数传进去就可以， for(var i in data) {   xxxx(i); } function xxxx=function(i) {     var value=i;   ...请求数据.... success() {   value; //这里value 就不会变了 } }

for 循环 wx.request 的bug

[图片] 如图 i 在wx.request外或者在data中时是正常的但在success里时却全部是10 用什么方法可以解决呢

2019-02-21

目前都不行

canvas怎么引入线上字体

canvas画布引入线上字体没办法，或者小程序可以实现截屏功能吗？

2019-02-21

用百度的‘文档服务 DOC’，把pdf转成h5页面就可以用了

小程序如何预览pdf

小程序如何预览pdf 啊 ios 可以直接用 wev-view 但是安卓就不行安卓用downloadFile 下载下来然后用openDocument 预览，但是这样就直接跳出小程序了还有没有其他方法啊

2018-12-25

裁剪路径没有生成完整，你调用下fill() 填充以一个透明色，应该可以把路径生成完整。这个和h5还是有差距的。 var drawCircleImg = function(ctx, img, x, y, r) {   ctx.save();   ctx.fillStyle ="rgba(255, 255, 255,255)";   const d = 2 * r;   const cx = x + r;   const cy = y + r;   ctx.arc(cx, cy, r, 0, 2 * Math.PI);   ctx.fill();   ctx.clip();   ctx.drawImage(img, x, y, d, d);   ctx.restore(); }

画原圆形头像

直接上图 [图片] 代码： shareContent.setFillStyle("rgb(255, 253, 208)"); shareContent.fill(); shareContent.fillRect(100, 100, 200, 60); //画分享者头像 const shareAvatarRadius = 40; const shareAvatarX = 60; const shareAvatarY = 90; drawCircleImg(shareContent, content.images[2], shareAvatarX, shareAvatarY, shareAvatarRadius); var drawCircleImg = function(ctx, img, x, y, r) { ctx.save(); var d = 2 * r; var cx = x + r; var cy = y + r; ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.clip(); ctx.drawImage(img, x, y, d, d); ctx.restore(); } 这个圆形头像会突出了，不知道出了什么问题

2018-12-12

可以用 wx.canvasToTempFilePath 来缓存当前canvas的东西，在通过drawImage 来回写回去。 wx.canvasPutImageData这个不好用，设置的数据有大小限制，图片数据大了会直接就报错了。

有没有像h5的canvas有getImageData和putImageData

请问下，h5的canvas有getImageData和putImageData，但是小程序只有wx.canvasGetImageData和wx.canvasPutImageData这样的异步回调，能不能提供像h5那样的方法 - 用小程序做一个绘图软件，虽然有beginpath、moveto、lineto等方法，但是随着路径越来越多计算时间就越来越长，所以就需要缓存当前的路径作为位图保存下来，然后把路径清空，可惜只有wx.canvasPutImageData，异步且这个方法会清除画布 - canvas提供了drawimage，不过是传入一个图片路径，同理应该可以用canvas绘制位图，或者有没有其他接口，我想要h5的putImageData 同步而且性能好的

2018-12-12

看上去你的图片是贴图的时候是拉升了，试下根据原始图片大小贴到一个内存 canves上，把字写上去，在保存图片，把图片回帖到显示的界面上。或者你让后台api 把图画+文字都生成好，你直接下载显示

canvas绘制 iphoneX错位问题别的手机都没问题

编辑器可以正常适配,真机无法适配,绘制错位

2018-12-07

主要是开源框架迁移到小程序，又不能直接用，各种错误。好不容易把需要的东西都抠出来了，发现超过500K了。小程序上什么业务又不是开发说了算的，老板说把app的人全开了，全部迁移到小程序。你能怎么说。

js文件大于500K，出现警告。文件限制能否放大点

js 大于500K，会出现警告。"The following files, which are greater than 500kb, has jumped the compression and conversion from es6 to es5"。看警告你们应该是用babel来转es5, 能否改下限制呀， 500K太小了吧，随便写一个底层的模块就超过了。

2018-12-06

选择需要上架的开放服务

案例类型