主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
2020 年第一篇文章。 年初的时候,忙着复习、答题,根本没有时间写东西。 书读得越多,我就越觉得自己的技术越来越差。 我一直是一个初学者。 我碰巧有一个最近项目的画布。 这个业务突然重新点燃了我的UI前端火,我写下了一些陷阱和想法。
陷阱问题一:为什么画布上绘制的图片模糊?
在画布上绘制图片或文字时,将画布的宽度和高度设置为375*667。 可以看到绘制的图片非常模糊,感觉像是低分辨率的图片,而且文字也显得模糊。 可能会有一些层次感。
原因:在前端开发中,知道有一个属性,叫做devicePixelRatio。 该属性决定了渲染界面时用于单独渲染设备的物理像素数(通常为 2)。 像素。
例如,对于100*100像素的图像,2个像素用于在Retina屏幕上渲染图像的1个像素。 这相当于将图像加倍,因此图像如下所示: 它变得模糊,因此视网膜屏幕上的每个像素都变得更厚。
解决方案:使用样式将canvas-width和canvas-height增加2x,并将canvas显示宽度和高度减少2x。
示例:
问题2:如何处理px和rpx之间的转换
rpx是唯一的尺寸单位,可以根据情况进行调整?屏幕的宽度。 在iPhone6/iphonex上,1rpx对应不同的px。 因此,画布在不同手机上的显示可能不一致。
在画海报之前,我们收到的设计稿一般都是基于iPhone 6两倍大的图片。 从上一题的解法中我们也知道,画布的尺寸也增大了一倍。 因此,可以直接测量两倍于图片尺寸的设计方案,直接绘制画布,但需要注意rpxtoPx的尺寸。
/** * * @param {*} rpx * @param {*} int //是否为整数 => 0.5 //iphone6 PixelRatio => 2 像素比例 */toPx(rpx, int) { if (int) { return parseInt(rpx * this.pixel * this .Ratio ) } return rpx * this.factor * this.pixelRatio }问题3:如果CanvasContext.measureText计算的是纯数字,那么在移动设备上将为0。
this.ctx.measureText(text).width 小程序计算文本的长度,但如果您使用所有数字,您将看到 API 始终将其计算为 0。 因此,我们最后使用模拟的MeasureText方法来计算文本的长度。
measureText(text, fontSize = 10) { text = String(text) text = text.split('') let width = 0 text.forEach(function(item) { if (/[a-zA) -Z]/.test(item)) else if (/-/.test(item)) { width += 3.25 } else if (/[\u4e00-\u9fa5 ]/.test(item) ) ) { // 中国人匹配 width += 10 } else if (/\(|\)/.test(item)) { width += 3.73 } else if (/\s/.test(item)) { width += 2.5 } else if ( /%/.test (item)) {width+= 8} else {width+= 10}) return width*fontsize/10} 问题4:如何让字体行居中?
如果字体太长,就会超出画布,绘图看起来不美观。 在这种情况下,额外的部分将如下所示: 您可以设置宽度并循环计算以计算文本的宽度。 如果超出这个范围,则在截取子字符串并附加后使用......就是这样。
let fillText=''let width = 350for (let i = 0; i = width) { FillText.Substring(0, FillText.Length -)+ '...}} if (LINE
文字剧中的显示公式:
-的宽度(文字宽度)/2 + x(x为字体的x轴位移)
let w = this.measureText(text, this.toPx(fontSize, true))this.ctx.fillText(text, this.toPx((this.canvas.width - w) / 2 + x), this.toPx(y + (lineHeight || fontSize) *index)) 问题5:如何在小程序中处理网络图如何在小程序中处理网络图像,例如CDN上的图像?使用时需要接入微信进行本地LRU管理,以便后续绘制同一张图片时可以节省下载时间。 因此,首先需要为微信小程序后台的downloadFile配置一个合法的域名。 然后,在画布上绘图之前,建议提前下载图像并等待图像下载后再开始绘制,以避免出现绘制失败的问题。
问题6:IDE中可以设置Base64图像数据进行绘图,但在实际设备上没有用吗?
首先,将base64转换为Uint8ClampedArray格式。 然后通过wx.canvasPutImageData(OBJECT, this)在画布上进行绘制,并将画布导出为图像。
问题6:如何绘制圆形图片? 问题7:关于wx.canvasToTempFilePath
使用Canvas绘制成功后,直接调用该方法生成图像。 在IDE上没有问题,但在实际设备上生成的镜像会不完整。 可以使用setTimeout来解决这个问题。 问题。
this.ctx.draw(false, () => { setTimeout(() => { Taro.canvasToTempFilePath({ CanvasId: 'canvasid', success: async(res))) => { this.props.onsavePoster(res.tempfilepath) // 回调事件 // 清除画布 this.ctx.clearrect(0, 0, canvas_width, canvas_height). 呃)}},这个。 $scope)}, time)}) 问题 8:关于 CanvasContext.font
字体大小不能使用十进制数字。 如果字体大小部分包含小数,则整个 FONT 设置将失效。
问题 9:Android 上字体渲染是否未对齐?
Android 智能手机上会出现此问题,iOS 上则正常。 当我第一次看到这个问题时,我不明白为什么有些在中间,有些在前面。 后来发现Android的this.ctx.setTextAlign(textAlign)默认是居中的,这造成了一些混乱。 当我把它改为左边时,它就变得正常了。
问题10:绘制折线图
使用画布绘制简单的折线图。 只需使用 lineTo 和 moveTo API 连接点即可。 使用 createLinearGradient 绘制阴影。 思考一:使用json配置表生成海报的局限性
如今的海报生成只需要根据设计方案测量尺寸即可,但测量过程还是很繁琐的。 您必须在各处手动调整它。 后期还可以通过拖拽的方式在Web端完成设计方案,自动生成json,应用到小程序海报上。
思考2:后端生成海报的局限性
海报最初是后端的学生是的,优点是不需要前端绘图时间,也不用踩微信API的陷阱。 接口返回一个URL,可以显示。 但在后端产生的效果并不好。 毕竟这种工作比较前端。
想法三:前端生成海报的局限性
前端生成海报时,可能需要将图片下载到本地或者使用Android专用的setTimeout来保证正常绘制。这需要很多时间。 。 各种兼容性问题,手机、Android、iOS等上的DPR不停的彩蛋要秃了~哈哈哈哈~
彩蛋用的是最新的Canvas- 2D背景图 真的可以吗?你不把它们都画出来吗?
提醒一下,在Canvas的开发过程中,小程序中始终存在着一丝曙光。
我也尝试了最新的canvas2d API,果然和web端同步了,书写变得更流畅了。 在开发者工具中一切看起来都很好,但是当我在手机上运行它时,它只显示一半的宽度。 对于不同型号的测试也是如此。
您可以稍后将其更改为原始画布。 。 。 具体原因目前微信社区尚未找到。 我们会在未来的迭代和升级中考虑它。
推荐教程:《JS教程》
PHP快速学习视频免费教程(从初学者到高手)
如何学习PHP? 我该如何开始学习PHP?我应该从哪里学习PHP?如何快速学习PHP? 这里有简单的 PHP 学习教程(从初学者到专家)。 您可以保存并下载您想学习的朋友。
下载
这几篇文章你可能也喜欢:
- 小程序性能优化实用技巧(小程序性能优化实用技巧有哪些?)
- 微信小程序调用微信认证窗口(微信小程序微信认证)
- 微信小程序wx.request请求数据错误(微信小程序请求错误)
- 为什么微信小程序无法加载?(微信小程序总是加载失败)
- 微信小程序开发初体验(微信小程序开发初体验如何写)
本文由主机参考刊发,转载请注明:如何使用Canvas(微信小程序中制作海报的软件)在小程序中绘制海报 https://zhujicankao.com/123849.html
评论前必须登录!
注册