没办法将一张图片融合到另一张图片里面吗?

[pashangshangpo]

没办法将一张图片融合到另一张图片里面吗? 另外就是Box里面的两张图片能不能不设置宽高,自适应Box元素?

import { useEffect } from 'react' import { App } from 'leafer-editor'

import './App.css'

function Main() { useEffect(() => { const app = new App({ view: 'editor', editor: {} })

app.tree.add({
  tag: 'Frame',
  width: 246,
  height: 558,
  fill: '#32cd79',
  cornerRadius: [10, 10, 10, 10],
  draggable: true,
  children: [
    {
      tag: 'Text',
      x: 20,
      y: 20,
      text: 'Hello World',
      editable: true,
      draggable: true,
    },
    {
      tag: 'Box',
      x: 20,
      y: 120,
      draggable: true,
      width: 200,
      height: 420,
      hitChildren: false,
      editable: true,
      resizeChildren: true,
      children: [
        {
          tag: 'Image',
          url: '/iphone16promax_test.png',
          width: 200,
          height: 420,
        },
        {
          tag: 'Image',
          url: '/iphone.png',
          width: 200,
          height: 420,
        }
      ]
    }
  ],
})

return () => {
  app.destroy(true)
}

}, [])

return ( <div id="editor" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', }} > ) }

export default Main

[pashangshangpo]

希望图片显示在手机壳图片里

[pashangshangpo]

{
          tag: 'Box',
          x: 20,
          y: 120,
          draggable: true,
          width: 200,
          height: 420,
          hitChildren: false,
          editable: true,
          resizeChildren: true,
          children: [
            {
              tag: 'Image',
              url: '/iphone.png',
              width: 200,
              height: 420,
              mask: 'clipping',
            },
            {
              tag: 'Image',
              url: '/iphone16promax_test.png',
              width: 200,
              height: 420,
            },
          ]
        }

我试了mask: clipping,这个也不是我要的效果,内容区域的图片没有被完整显示

[leaferjs]

目前应该不支持，建议多看一下遮罩的文档，调试一下示例，你这个手机壳的场景需要3张图片，一张不透明的手机壳形状做遮罩，然后用户的图片，再盖一个手机壳的图片。