How dashArray works?
ahsan-sabir opened this issue · 3 comments
Coming from the svg world, I am trying to wrap my head around how the dashArray option works here.
Given the description in readme (dashArray - the length and space between dashes. (0 - no dash)),
I was assuming that in a line of like 50 units, a dashArray of like 25 would mean 1 dash and 1 gap. But things seem to work differently here. How to accomplish this in THREE.MeshLine?
Hi there!
const material = new MeshLineMaterial({
color: "red",
lineWidth: 1,
dashArray: 1 / 50
});Gives you a combinaison of 50 dashes and 50 gaps equal in size!
Can I specify dashes and gaps in units like we do in svg in px, for example the dash of 12 units and gap of 6 units?
I have some svg designs that I am converting to webgl.
The dashArray will divide the current length of your line by the number you want. For example 1 / 50 will give you 50 dashes + 50 gaps whatever le length of your line. So if you line = 100 units, 1 dash will be 1 unit for sure.
Now, we have the dashRatio property too. That will help you to get a different a size for your dash compared to the gap.
Following your needs (12 units for the dash, 6 units for the gap), the gap should be 1 / 3 of the dash. So you can use those values:
