x,y 不能基于父元素定位吗？

[lynzz]

实际效果如下

期望

canvas 应在白色区域内，是使用有问题？

代码

import { Button, Icon, Overlay, Popup } from '@antmjs/vantui';
import { Canvas, View } from '@tarojs/components';
import { PosterItemConfig, PosterRender, PosterRenderRef } from "@poster-render/taro-react";
import Taro, { pxTransform } from '@tarojs/taro';
import React, { useEffect, useMemo, useRef, useState } from 'react';
type ProdPosterProps = {
  show?: boolean;
  onClose?: () => void;
}
export default function ProdPoster(props: ProdPosterProps) {
  const { show, onClose } = props;
  const posterRender = useRef<PosterRenderRef>(null);
  const canvasWidth = 644;
  const canvasHeight = 500;
  const text1 = '长按识别小程序，跟团购买 >>';
  const handleClose = () => {
    onClose?.();
  }
  const handleSave = () => {
    posterRender.current?.savePosterToPhoto();
  }
  const data1: PosterItemConfig[] = [
    {
      type: "rect",
      x: 0,
      y: 0,
      width: 644,
      height: 1104,
      radius: 0,
      backgroundColor: "black",
    },
    {
      type: "image",
      x: 0,
      y: 0,
      width: 644,
      height: 1104,
      mode: "cover",
      src: "https://img.1000.com/shumou/interaction/bg3.png",
      radius: 16,
    },
    {
      type: "image",
      x: 294,
      y: 30,
      width: 96,
      height: 96,
      radius: 48,
      src: "https://img.1000.com/shumou/interaction/avatar.png",
    },
    {
      type: "text",
      x: (textWidth, measureText) =>
        (644 - textWidth - measureText("的助力邀请", {fontSize: 28 }).width) / 2,
      y: 180,
      width: (textWidth) => textWidth,
      height: 30,
      text: "中二猪猪猪",
      color: "#fff",
      fontSize: 28,
      textAlign: "left",
      baseLine: "top",
      textDecoration: "line-through",
    },
    {
      type: "text",
      x: (textWidth, measureText) =>
        (644 - textWidth - measureText("中二猪猪猪", {fontSize: 28 }).width) / 2 +
        measureText("中二猪猪猪", {fontSize: 28 }).width +
        10,
      y: 180,
      width: 200,
      height: 30,
      text: "的助力邀请",
      color: "#FEEE93",
      fontSize: 28,
      baseLine: "top",
      textDecoration: "underline",
    },
    {
      type: "image",
      x: 70,
      y: 240,
      width: 508,
      height: 68,
      src: "https://img.1000.com/shumou/interaction/text.png",
    },
    {
      type: "rect",
      x: 22,
      y: 760,
      width: 600,
      height: 320,
      backgroundColor: "#fff",
      radius: 20,
      borderColor: "#000",
      borderWidth: 10,
    },
    {
      type: "rect",
      x: 100,
      y: 800,
      width: 100,
      height: 100,
      backgroundColor: "red",
      radius: 50,
      borderColor: "yellow",
      borderWidth: 10,
    },
    {
      type: "line",
      x: 50,
      y: 50,
      destX: 200,
      destY: 50,
      color: "#fff",
      lineWidth: 4,
    },
  ]

  return (
    <Overlay show={show} onClick={handleClose}>
      <View
        style={{
          width: pxTransform(canvasWidth),
          position: 'absolute',
          left: '50%',
          top: '50%',
          transform: 'translate(-50%, -50%)'
        }}
        className={`flex flex-col`}
      >
        <View className={`flex justify-end`}>
          <View
            className={`py-2 text-current`}
          >
            <Icon name='close' size={32} onClick={handleClose}/>
          </View>
        </View>
        <View
          style={{
            backgroundColor: '#fff',
            position: 'relative',
            width: pxTransform(canvasWidth),
            height: pxTransform(canvasHeight),
          }}>
          <PosterRender
            ref={posterRender}
            canvasId="taro-poster-render"
            renderType={"canvas"}
            canvasWidth={canvasWidth}
            canvasHeight={canvasHeight}
            // showMenuByLongpress
            debug
            style={{
              width: '100%',
              height: '100%',
              position: 'absolute',
              top: 0,
              left: 0,
              zIndex: 1,
            }}
            onRender={() => console.log("onRender")}
            onLongTap={() => posterRender.current?.savePosterToPhoto()}
            onRenderFail={(err) => console.error("onRenderFail", err?.message)}
            onSave={(url) => console.log("onSave", url)}
            onSaveFail={(err) => console.error("onSaveFail", err?.message)}
            list={data1}
          />
        </View>
        <View className={`mt-4`}>
          <Button block type='primary' onClick={handleSave}>保存图片</Button>
        </View>
      </View>
    </Overlay>
  )
}

[lf7817]

https://github.com/lf7817/poster-render/blob/next/packages/taro-react/src/index.tsx#L82

[lf7817]

这里没有做任何特殊处理

[lf7817]

这是模拟器吧，真机会出现吗

[lynzz]

@lf7817 是模拟器下的会这样，真机试了下没问题

[lf7817]

模拟器升级到最新版，我这边模拟器正常的