收藏
回答

安卓 Android Canvas clip 无效果

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug ctx.clip() 客户端 Android 6.6.7 2.2.1
ctx.save()
ctx.beginPath()
ctx.setFillStyle('#fff')
sketchUp.drawCircle(10.533 * vw, res[6])
ctx.setShadow(0, 0.5 * vw, 10, 'rgba(55,75,99,0.15)')
ctx.fill()
ctx.restore()

ctx.save()
ctx.beginPath()
sketchUp.drawCircle(10 * vw, res[6])
ctx.clip()
sketchUp.drawImg(this.avatarUrl, res[6])
ctx.restore()
ctx.draw(true)


_canvasDraw () {
const ctx = this.sketchUp.ctx
 wechat.draw(ctx).then(res => {
this._canvasToFile(ctx)
}).catch(err => {
console.info(err)
wechat.hideLoading()
this.$refs.toast.show('绘图失败,请重新尝试!')
})
},
_canvasToFile (ctx) {
wechat.canvasToTempFilePath({
x: 0,
   y: 0,
   width: this.divW * this.prop,
   height: this.divH * this.prop,
   destWidth: this.divW * this.prop,
   destHeight: this.divH * this.prop,
   canvasId: 'poster',
   fileType: 'jpg'
 }, ctx).then(res => {
wechat.hideLoading()
// wechat.previewImage({urls: [res.tempFilePath]})
   this._upLoadImg(res.tempFilePath)
const path = `/pages/poster-share/poster-share`
   getApp().globalData.imgUrl = res.tempFilePath
this.$router.push({path})
// console.info(res.tempFilePath)
 }).catch(err => {
console.info(err)
wechat.hideLoading()
this.$refs.toast.show('请重新尝试!')
})



/**
* 绘制圆形
* @param r 半径
* @param res 盒子的信息
* @param xAdjust 可调整的偏移量x轴
* @param yAdjust 可调整的偏移量y轴
* @private
*/
drawCircle (r, res, xAdjust = 0, yAdjust = 0) {
this.ctx.arc((res.left + this.rPos.left + res.width / 2 + xAdjust) * this.prop, (res.top + this.rPos.top + res.width / 2 + yAdjust) * this.prop, r, 2 * Math.PI)
}

/**
* 绘制图片
* @param imgUrl  图片路径
* @param res 盒子信息
* @param xAdjust 可调整的偏移量x轴
* @param yAdjust 可调整的偏移量y轴
* @private
*/
// drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
drawImg (imgUrl, res, mode, xAdjust = 0, yAdjust = 0) {
let x = (res.left + this.rPos.left + xAdjust) * this.prop
 let y = (res.top + this.rPos.top + yAdjust) * this.prop
 let w = res.width * this.prop
 let h = res.height * this.prop
 // let dx = x + w / 2
 // let dy = y + y / 2
 // let dw = w
 // let dh = h
 switch (mode) {
case 'widthFix' : {
// dh = res.height
     break
   }
default:
break
 }
// this.ctx.drawImage(imgUrl, x, y, w, h, dx, dy, dw, dh)
 this.ctx.drawImage(imgUrl, x, y, w, h)
}


回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容