Wrong coordinates getPointAtLength
hugweb-zz opened this issue · 16 comments
Hi guys !
I'm having a weird issue regarding the coordinates. I'm drawing a simple path in react native and moving a point following this path. I'm using the contentOffset value of my scrollView to generate the percentage value require by the getPointAtLength method.
svgWidth = width of the SVG
const properties = require("svg-path-properties").svgPathProperties(path)
const length = properties.getTotalLength()
const percentage = (value / svgWidth) * length
const point = properties.getPointAtLength(pourcentage)
Here is a visual of the rendering. I don't understand why my point is not following exactly the path.
Any idea @rveciana ?
Best
I had a similar issue but it was caused by a transformed being applied in a G outside of my path. I had to reverse the transform after I had called getPointAtLength. Not sure if this helps you but it may help someone.
Hi, I didn't see the issue, I'm sorry.
Can you send me the exact path that fails? Without it, I can't check why...
I found a similar issue with an SVG path. I have a working example demonstrating that here: https://beta.observablehq.com/@jmuyskens/getpointatlength-browser-bug
Thank you, that was useful. I'll take a look.
All the Arc functions were buggy because of a library I was using to convert them into Bezier curves. I've found another one that seems to work:
https://beta.observablehq.com/@rveciana/tests-with-svg-path-arc-element
I'll add it into the code when I have some time
The new v0.4.3 solves this issue
Still getting the same problem, are you sure this has been fixed?
Hi, can you please send me the path that is failing?
It turns out the problem has something to do with the scrollview, I'm overlaying it with a circle svg, it works fine when its placed inside the parent svg though. So it's not related to the library.
I am seeing something similar and using https://github.com/JesperLekland/react-native-svg-charts to draw the chart. It seems like the point is slightly off when there is a curve.
It's using this for curves: https://github.com/d3/d3-shape#curves
Hi! Can you give me the path definition, please?
Hi, I mean the letters and numbers defining the path, which is what you pass to the function as a parameter. Something like:
M482,50 A 500,500 0 1 0 723,144.6
Dumb me.
M375,196.49793084546508C359.375,172.2807295383785,343.75,148.0635282312919,328.125,127.92186433544859C312.5,107.78020043960528,296.875,91.71407395500529,281.25,120C265.625,148.2859260449947,250,220.92390461958405,234.375,231.378065894096C218.75,241.83222716860797,203.125,190.10257114304247,187.5,159.19790150985477C171.875,128.29323187666708,156.25,118.21354863585728,140.625,153.36746275300715C125,188.521376870157,109.37500000000001,268.90888834526646,93.75,280.333251953125C78.12499999999999,291.75761556098354,62.5,234.21883130159105,46.875,209.87742910473972C31.250000000000004,185.53602690788838,15.625000000000002,194.39200677357803,0,203.24798663926768
I basically get this from the graph and then do a bisect on an array generated by this library, in order to position the pointer.
This is how it gets generated:
const line = shape.line() .x((d) => x(d.x)) .y(d => y(d.y)) .defined(item => typeof item.y === 'number') .curve(curve) (data)
I only have problems on curves. With straight lines the pointer is centered.
The path you sent me seems to work, and has a different shape from the one you posted before:
Yes, the screenshot comes from something else.
I am building an array with getPointAtLength from the path and then doing a bisect:
const bisect = array.bisector(function(d) { return d.x; }).left;
It might be this? 😅