Skip to main content
Solved

Adding strokeCap to individual vertices

Ronak_Mokashi

Hi,
I have a simple vector line going from point A to point B. I want to add Triangle arrow to the vertex at point B. This is how I am doing it but it is not getting applied. What am I doing wrong here?

var vector = figma.createVector()
vector.vectorNetwork.vertices[0].strokeCap = "NONE"
vector.vectorNetwork.vertices[1].strokeCap = "ARROW_EQUILATERAL"

Best answer by ReneLopez

This snippet from this article seems to work:

/* This plugin adds arrowheads to vectors */
/* Created by Duncan Geere, Jan 2020 */

for (const selection of figma.currentPage.selection) { 
  const node = selection as VectorNode

  /* make a copy of the original node */
  let copy = JSON.parse(JSON.stringify(node.vectorNetwork))
 
  /* if it has a strokeCap property, change */
  if ("strokeCap" in copy.vertices[copy.vertices.length-1]) {
    copy.vertices[copy.vertices.length-1].strokeCap = "ARROW_EQUILATERAL"
    copy.vertices[0].strokeCap = "NONE"
  }

  /* assign the copy back to the original */
  node.vectorNetwork = copy
  
}
View original

4 replies

ReneLopez
  • ReneLopez
  • 34 replies
  • August 6, 2021

I think this is because the strokeCap property is read-only. But I would like to know the answer as well.

ReneLopez
  • ReneLopez
  • 34 replies
  • Answer
  • August 6, 2021

This snippet from this article seems to work:

/* This plugin adds arrowheads to vectors */
/* Created by Duncan Geere, Jan 2020 */

for (const selection of figma.currentPage.selection) { 
  const node = selection as VectorNode

  /* make a copy of the original node */
  let copy = JSON.parse(JSON.stringify(node.vectorNetwork))
 
  /* if it has a strokeCap property, change */
  if ("strokeCap" in copy.vertices[copy.vertices.length-1]) {
    copy.vertices[copy.vertices.length-1].strokeCap = "ARROW_EQUILATERAL"
    copy.vertices[0].strokeCap = "NONE"
  }

  /* assign the copy back to the original */
  node.vectorNetwork = copy
  
}
Ronak_Mokashi

Thank you so much @ReneLopez

Chaine
  • Chaine
  • 7 replies
  • May 7, 2022

I came into the same question and got here (a bit late though 😀 ) but I found my solution, to whoever comes for the answer:

node.vectorNetwork={
            vertices:[
              {x:something,y:something,strokeCap:'SQUARE'},
              {x:something,y:something,strokeCap:'ARROW_EQUILATERAL'},
            ],
            segment/region etc.
}

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings