Arrowheads in arrow images are missing

3 replies
117 views

Hi all.

The following arrow design was created.

exportAsync() was used to retrieve the arrow image.
The following image shows it.

How do I get an image that is not missing?

APIs

This topic has been closed for replies.

yoshioSolution

New Participant

Thanks Gleb , James_Yang.

It was very valuable information.

I was looking for a solution myself, and I found it.
The cause was the useAbsoluteBounds:true option.

success

let bytBmp:Uint8Array = await node.exportAsync({format:‘PNG’});

Failure

let bytBmp:Uint8Array = await node.exportAsync({format:‘PNG’, useAbsoluteBounds:true});

Gleb

Power Member

This definitely seems like a bug. As a workaround you can wrap this arrow in a larger frame.

James_Yang

Figmate

This snippet of code will export an arrow and put an image of it right next to it. The entire arrow should show up:

(async () => {
  const node = figma.currentPage.selection[0]
  const renderBounds = node.absoluteRenderBounds

  // Export a 2x resolution PNG of the node
  const bytes = await node.exportAsync({
    format: 'PNG',
    constraint: { type: 'SCALE', value: 2 },
  })

  // Add the image onto the canvas as an image fill in a frame
  const image = figma.createImage(bytes)
  const frame = figma.createFrame()
  frame.x = renderBounds.x + renderBounds.width + 20
  frame.y = renderBounds.y
  frame.resize(renderBounds.width, renderBounds.height)
  frame.fills = [{
    imageHash: image.hash,
    scaleMode: "FILL",
    scalingFactor: 1,
    type: "IMAGE",
  }]
})()

Result:

yoshioAuthorSolution