收藏
回答

canvas添加图片后变形?

使用canvas添加图片后,图片不成比例,但是只要点击一下屏幕就会正常。不知道是什么问题有点影响体验,麻烦大佬解答。

        draw() {
            var that = this
            if (this.data.bgImage !== '') {
                wx.getImageInfo({
                    src: that.data.bgImage,
                    success:(res)=>{
                        if(res.width>=res.height){
                          that.setData({
                              width:750,
                              height:750* res.height/res.width,
                              bgImage:res.path
                          })
                          that.setData({
                              y1:557.8 - that.data.height/2,
                              x1:0
                          })
                        }else{
                          that.setData({
                              width:1155*res.width/res.height,
                              height:1155,
                              bgImage:res.path
                          })
                          that.setData({
                              x1:375 - that.data.width/2,
                              y1:0
                          })
                        }
                    }
                  })
                  this.ctx.drawImage(that.data.bgImage, 0, 0,this.toPx(that.data.width), this.toPx(that.data.height))
                  this.drawArr.forEach((graph) => {
                    graph.paint();
                });
                return new Promise((resolve) => {
                    this.ctx.draw(false, () => {
                        resolve();
                    });
                });
            }


        },
    /**
     * 绘制元素
     */
    paint() {
        this.ctx.save();
        // TODO 剪切
        // this._drawRadiusRect(0, 0, 700, 750, 300);
        // this.ctx.clip();
        // 选择区域的中心点
        this.centerX = this.type === 'text' ? this.x : this.x + (this.w / 2);
        this.centerY = this.type === 'text' ? this.y : this.y + (this.h / 2);
        // 旋转元素
        this.ctx.translate(this.centerX, this.centerY);
        this.ctx.rotate(this.rotate * Math.PI / 180);
        this.ctx.translate(-this.centerX, -this.centerY);
        // 渲染元素
        if (this.type === 'text') {
            this.ctx.fillText(this.text, this.x, this.y);
        } else if (this.type === 'image') {
            this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);
        }
        // 如果是选中状态,绘制选择虚线框,和缩放图标、删除图标
        if (this.selected) {
            this.ctx.setLineDash([10, 10]);
            this.ctx.setLineWidth(2);
            this.ctx.setStrokeStyle('black');
            this.ctx.lineDashOffset = 10;
                this.ctx.strokeRect(this.x, this.y, this.w, this.h);
                this.ctx.drawImage('./icon/close.png', this.x - 15, this.y - 15, 30, 30);
                this.ctx.drawImage('./icon/scale.png', this.x + this.w - 15, this.y + this.h - 15, 30, 30);
        }
        this.ctx.restore();
    },

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

1 个回答

  • Cjiang
    Cjiang
    2022-04-15

    检查下是否是比例放大了?

    2022-04-15
    有用
    回复
登录 后发表内容