kuckboy1994 / mp_canvas_drawer Goto Github PK

Found this repo at https://github.com/trending/javascript?since=daily

Please read https://blog.codinghorror.com/the-ugly-american-programmer/

电商分享因产品图片长宽比不一样，显示出图片失去过去的长宽比，此处优化好一点，在getImageInfo方法重新按比例算出图的width及left的大小

传送门

添加的 text 是大段文本，文本中自带了换行，
组件默认清除了换行，凑成了一行，
只能自己把文本截取成一个数组绘制，希望可以优化

首先，你这个组件很棒！然后在一些使用场景里，是有对内容进行换行，但不作内容省略的（不管有多少字都继续换行），感觉可以出个配置参数做不省略处理。

比如我绘制的像素是750*1148，如果拿iphone6plus绘制保存的图就是原来像素乘以3，请问如何解决这个问题

我用canvas画出了海报，然后固定定位在屏幕中间，这个disable-scroll属性也加了，父元素也设置了overflow-y:hidden; 但是这个海报还是能上下滚动，求解

绘制出来的图片有时候某些样式会失效

提了pr给你，修复了安卓生成图片文字错位的bug。@kuckboy1994
https://github.com/qizf7/mp_canvas_drawer

有的安卓手机生成的时候,样式和设置的不一样,会出现重叠等问题

md, 既然不支持base64图片，这怎么搞

为啥绘制出来的图是透明的，设置clear是false有不起作用。
能否把这些基本的用法，详细再写写，还有left、right也有点乱，textAlign的center不起作用啊。

canvasContext.clip

https://github.com/AfanSama/esay-canvas 介绍都是一样的

设置了textAlign：‘center’，但是并没有居中。请问要如何设置才能使文字居中？

大概就是点击条目1生成一张图片 但是点击条目2依然会生成1的图片，再次点击会好，我看代码里面添加了缓存的方式，不知道有无动态设置这一属性的方法？

rect 可以设置圆角吗？

{ type: 'text', content: 'this is text', fontSize: 30, color: '#402D16', textAlign: 'center', top: 270, right: 0 },

我设置文案居中或者居右的时候没有效果，只有居左的时候可以显示

` drawImage(params) {
const { url, top = 0, left = 0, width = 0, height = 0, circleRadius = 0, color = '#eeeef0' } = params
this.ctx.save()
if (circleRadius) {
this.ctx.beginPath()
this.ctx.arc(left, top, circleRadius, 0, 2 * Math.PI);
this.ctx.setStrokeStyle(color)
this.ctx.stroke(); // 进行绘制
this.ctx.clip();
this.ctx.drawImage(url, left - circleRadius, top - circleRadius, width, height)
} else {
this.ctx.drawImage(url, left, top, width, height)
}

        this.ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图问下文即状态 还可以继续绘制
    }`

vivo手机绘制文本出现重复现象。且字体，颜色不一致

文字有时候一行，有时候很多行，这样就会造成很多问题，1️⃣整个页面高度不确定 2️⃣文字下方的图片如何定位

请问下绘制canvas的时候图片怎么旋转

md，bug真tmd的多，还没人解决

有未不基于小程序的版本？HTML5 朋友圈里面需求也多，但只在微信里面就不好玩了

坑爹啊，测试体验版都没问题上线就报错unhandled promise rejection

你好，我点击绘制之后，就一直显示绘制分享图片中 然后没有图片出来，是怎么回事啊，谢谢

如题，这两串官方代码都是在wxml里面用的啊，但你的绘制是在js完成，有啥办法用上：

最上方的标题重复错位

先从canvasdrawer.wpy文件中找到画图的这个方法drawImage。然后直接替换下面的代码就可以。
drawImage(params) { this.ctx.save(); const { url, top = 0, left = 0, width = 0, height = 0, borderRadius = 0 } = params; if(borderRadius){ let d = borderRadius * 2; let cx = left + borderRadius; let cy = top + borderRadius; this.ctx.beginPath(); this.ctx.arc(cx, cy, borderRadius, 0, 2 * Math.PI); this.ctx.fill(); this.ctx.clip(); this.ctx.drawImage(url, left, top, d, d); }else{ this.ctx.drawImage(url, left, top, width, height); } this.ctx.restore(); }
borderRadius 是圆的半径，image类型的json里加这个属性的时候你画出来的是圆形图。

下面是画圆角矩形，rect类型的json里加一个radius（圆角半径）属性就可以画圆角矩形。
drawRect(params) { this.ctx.save(); const { background, top = 0, left = 0, width = 0, height = 0, radius = 0 } = params; this.ctx.setFillStyle(background); if(radius){ // 开始绘制 this.ctx.beginPath(); // 左上角 this.ctx.arc(left + radius, top + radius, radius, Math.PI, Math.PI * 1.5); // border-top this.ctx.moveTo(left + radius, top); this.ctx.lineTo(left + width - radius, top); this.ctx.lineTo(left + width, top + radius); // 右上角 this.ctx.arc(left + width - radius, top + radius, radius, Math.PI * 1.5, Math.PI * 2); // border-right this.ctx.lineTo(left + width, top + height - radius); this.ctx.lineTo(left + width - radius, top + height); // 右下角 this.ctx.arc(left + width - radius, top + height - radius, radius, 0, Math.PI * 0.5); // border-bottom this.ctx.lineTo(left + radius, top + height); this.ctx.lineTo(left, top + height - radius); // 左下角 this.ctx.arc(left + radius, top + height - radius, radius, Math.PI * 0.5, Math.PI); // border-left this.ctx.lineTo(left, top + radius); this.ctx.lineTo(left + radius, top); // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应 this.ctx.fill(); this.ctx.closePath(); }else{ this.ctx.fillRect(left, top, width, height); } this.ctx.restore(); }

PC完美，真机调试很慢（真的非常慢，iPhone se），但是能出来，但是真机出不来
wxml代码
<block wx:if="{{showShareImage}}"> <image src="{{shareImage}}" style="height: {{windowHeight}}px;top: {{scrollTop}}px;" class="share-image"></image> </block> <block wx:if="{{showSaveBtn}}"> <button class="saveImg" style="top: {{scrollTop+windowHeight-50}}px;" bindtap="eventSave">保存图片到相册</button> </block> <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>

js代码
eventDraw () { wx.showLoading({ title: '绘制分享图片中', mask: true }) this.setData({ showShareImage:true, showSaveBtn:true, painting: { width: 375, height: 555, clear: true, views: [ { type: 'image', url: 'http://retail.26460000.com/share.jpeg', top: 0, left: 0, width: 375, height: 555 }, { type: 'image', url: '/image/sys/redlogo.png', top: 27.5, left: 35, width: 120, height: 60 }, { type: 'text', content: '大兴二手车', fontSize: 16, color: '#402D16', textAlign: 'left', top: 33, left: 160, bolder: true }, { type: 'text', content: '您值得信赖的二手车专家', fontSize: 15, color: '#563D20', textAlign: 'left', top: 59.5, left: 160 }, { type: 'image', url: this.data.car.releaseRetail.mainPicPath, top: 136, left: 42.5, width: 290, height: 186 }, { type: 'image', url: '/image/sys/8cm.jpg', top: 435, left: 50, width: 100, height: 90 }, { type: 'text', content: this.data.car.releaseRetail.spOneSentenceAd +" "+ this.data.car.releaseRetail.modelName, fontSize: 16, lineHeight: 21, color: '#383549', textAlign: 'left', top: 336, left: 44, width: 287, MaxLineNumber: 2, breakWord: true, bolder: true }, { type: 'text', content: '￥'+this.data.car.releaseRetail.internetPrice+"万", fontSize: 19, color: '#E62004', textAlign: 'left', top: 387, left: 44.5, bolder: true }, { type: 'text', content: '新车指导价:￥'+this.data.car.releaseRetail.newCarPrice+"万", fontSize: 13, color: '#7E7E8B', textAlign: 'left', top: 391, left: 140, textDecoration: 'line-through' }, { type: 'text', content: '长按识别图中二维码', fontSize: 14, color: '#383549', textAlign: 'left', top: 460, left: 165.5, lineHeight: 20, MaxLineNumber: 2, breakWord: true, width: 125 } , { type: 'text', content: '海量优质二手车', fontSize: 14, color: '#383549', textAlign: 'left', top: 480, left: 165.5, lineHeight: 20, MaxLineNumber: 2, breakWord: true, width: 125 } ] } }) }, eventSave () { var that = this; wx.saveImageToPhotosAlbum({ filePath: this.data.shareImage, success (res) { wx.showToast({ title: '保存图片成功', icon: 'success', duration: 2000 }) that.setData({ showShareImage: false, showSaveBtn:false }) } }) }, eventGetImage (event) { console.log(event) wx.hideLoading() const { tempFilePath, errMsg } = event.detail if (errMsg === 'canvasdrawer:ok') { this.setData({ shareImage: tempFilePath, showSaveBtn:true }) } },

你好，我绘制两张图片，一张是大背景，一张是二维码，理论上我第二次绘制二维码的时候是覆盖在第一张上面的，为什么不显示，我自己手写canvas的时候是可以的，但是你的组件却不显示？？？

这个可以引入到mpvue里边使用吗?如果不可以的话可以改一下吗?让我们广大的mpvue使用者为你点赞

能否将二进制的图片绘制出来呢？

• 重现场景:
  微信开发者工具, <预览>模式

• 操作:
  手机扫码, 点击绘制

• 问题:
  大几率下文字重复/重叠

• 图:

十分感谢你开发了原生组件以及mpvue版本的canvas_drawer！
根据你的代码，我移植开发了wepy版本，希望能加入您的文档里！
地址：wepy_canvas_drawer