小程序canvas组件 设置图片边框阴影问题?
发布于 5 年前 作者 fhou 11384 次浏览 来自 官方Issues

使用canvas组件drawImage()用了两次,fillRect也用了两次,一共画了4个图层,从而构造出了如下图所示的效果。但是我设置阴影后,画的4个图层全部都有阴影,但我只想要让外框有阴影,请问大神该如何做呢

var context = wx.createCanvasContext('zbShare')
    // 选择像素为500的话,那么图片宽度为500,高度等比例计算即可。
    // 画背景图片
    context.drawImage(this.data.bgWallUrlCanvas, 0, 0, this.data.calWindowWidth, this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace )

    // context.setShadow(10, 10, 20, 'blue')
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowBlur = 0;
    context.shadowColor = 'rgba(0,0,0,1)';
  
    // 画框
    context.drawImage(this.data.barCanvas, (this.data.calWindowWidth - (this.data.FrameBarImgWidth + this.data.frameBarBorder)) / 2, (this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace - (this.data.FrameBarImgHeight + this.data.frameBarBorder * 2)) / 2, this.data.FrameBarImgWidth + this.data.frameBarBorder, this.data.FrameBarImgHeight + this.data.frameBarBorder * 2)

    // 画卡纸+颜色
    context.setFillStyle(this.data.paperColor)
    context.fillRect( (this.data.calWindowWidth - this.data.paperFrameImgWidth ) / 2,  (this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace - this.data.paperFrameImgHeight) / 2, this.data.paperFrameImgWidth, this.data.paperFrameImgHeight)

    // 画里衬+颜色
    context.setFillStyle(this.data.inColor)
    context.fillRect( (this.data.calWindowWidth - this.data.inContentImgWidth ) / 2,  (this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace - this.data.inContentImgHeight) / 2, this.data.inContentImgWidth, this.data.inContentImgHeight)
    
    // 画中间图片
    context.drawImage(this.data.imgSrcCanvas, (this.data.calWindowWidth - this.data.contentImgWidth ) / 2, (this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace - this.data.contentImgHeight) / 2, this.data.contentImgWidth, this.data.contentImgHeight)

    // 调用getTempFilePath函数获取路径,然后保存至相册
    context.draw(false, this.getTempFilePath);

回到顶部