xlfsummer / mp-painter

声明式地创建适用于 uniapp, 原生微信小程序和原生H5的 canvas 海报

Home Page:https://mp-painter.xlf-summer.cn/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

设置upx2px单位为1时 image的的单位不会自动转化

ReflexFox opened this issue · comments

问题描述
image的尺寸没有变化

复现步骤

 drawProductCanvas: function () {
      let ctx = uni.createCanvasContext('sharePoster', this);
      let painter = new Painter(ctx, { upx2px: (x) => x * 1 });
      const source = {
        productTitle: this.product_title,
        productPrice: '¥' + this.price / 100,
        productSummary: this.product_summary,
        miniProgramQRUrl: this.qrUrl,
        miniProgramName: this.miniprogramName,
        productImage: this.canvas_images,
        LOGO: this.logoImg
      };
      let draw = async () => {
        await painter.draw({
          type: 'container',
          top: 0,
          left: 0,
          width: 375,
          height: 'auto',
          children: [
            {
              type: 'rect',
              position: 'absolute',
              top: 0,
              left: 0,
              width: 375,
              height: 667,
              background: '#fff'
            },
            {
              type: 'image',
              top: 20,
              left: 20,
              width: 100,
              height: 35,
              src: source.LOGO
            },
            {
              type: 'text-block',
              fontFamily: 'sans-serif',
              top: 20,
              color: '#333',
              left: 20,
              fontSize: 18,
              width: 342,
              lineHeight: 20,
              lineClamp: 2,
              content: source.productTitle
            },
            {
              type: 'text-block',
              fontFamily: 'sans-serif',
              top: 10,
              color: '#999999',
              left: 20,
              fontSize: 16,
              width: 342,
              lineClamp: 1,
              content: source.productSummary
            },
            {
              type: 'text',
              fontFamily: 'sans-serif',
              top: 12,
              color: '#5EB100',
              left: 20,
              fontSize: 20,
              content: source.productPrice
            },
            {
              type: 'image',
              top: 10,
              left: 20,
              width: 342,
              height: 342,
              src: source.productImage
            },
            {
              type: 'container',
              top: 0,
              left: 0,
              height: 124 + 20 + 10,
              direction: 'horizontal',
              children: [
                {
                  type: 'image',
                  top: 10,
                  left: 20,
                  width: 124,
                  height: 124,
                  src: source.miniProgramQRUrl
                },
                {
                  type: 'container',
                  top: 0,
                  left: 0,
                  children: [
                    {
                      type: 'text',
                      fontFamily: 'sans-serif',
                      top: 50,
                      color: '#333',
                      left: 20,
                      fontSize: 18,
                      content: source.miniProgramName
                    },
                    {
                      type: 'text',
                      fontFamily: 'sans-serif',
                      top: 5,
                      color: '#999',
                      left: 20,
                      fontSize: 15,
                      content: '长按识别去逛逛'
                    }
                  ]
                }
              ]
            }
          ]
        });
      };
      draw().then(() => {
        uni.canvasToTempFilePath(
          {
            canvasId: 'sharePoster',
            fileType: 'png',
            success: (res) => {
              console.log(this.canvasToImgSrc, 'canvasToImgSrc');
              this.canvasToImgSrc = res.tempFilePath;
              uni.hideLoading();
            },
            fail(rej) {
              console.log(rej);
              uni.hideLoading();
            }
          },
          this
        );
      });
    },

使用的环境
是微信、支付宝、还是其它的? 微信
是在开发者工具中还是真机上?开发者工具
使用的是那个版本的 mp-painter? 0.2.7

问题描述
image的尺寸没有变化

太简略了,不明白你的意思,详细描述下吧