How to move an SVG Icon along a (curvy) path of x/y coordinates in Xamarin.Forms

Question

How to move an SVG Icon along a (curvy) path of x/y coordinates in Xamarin.Forms

Erich Brunner 21

I want to move an SVG Icon or a BoxView for example along a variable path of x/y coordinates. Something like that.

What's a best pratice technique to accomplish that in Xamarin.Forms?

Accepted answer

1 additional answer

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

You could use SkiaSharp to implement the function of moving along a variable path of x/y coordinates.

Referring to the official documentation The Translate Transform, you could find this object HendecagramAnimationPage.

You could implement the moving animation by the same way as the sample.

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Erich Brunner 21 Reputation points

2022-04-14T06:49:09.753+00:00

Hello @Yonglun Liu (Shanghai Wicresoft Co,.Ltd.)
Thank you for your quick reply. Well those API are known on my side, too. Maybe I didn't describe the issue proberly.

Next attempt:
I have absolutely no idea where I get the (x,y) path coordinates for each point along the movement of the marker.

I guess I would have to draw the whole dashboard as an SVG image in some program like Adobe XD or Inkscape.

From that as a base image, I would have to draw a new SVG Image for each complete energy flow movement like the example described above (Movement from Power-Supplier -> Power Consumer).

Then I would have the (x,y) path coordinates for each energy flow movement.

From that point on it should be not so hard to draw a path with SkiaSharp and move a white filled circle (marker) along that path coordinates.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2022-04-14T07:11:18.97+00:00

There is no particularly good way to get path coordinates, because the dashboard is not a Xamarin view element.

You can try to place the dashboard in the center of the screen, so that the coordinates of the starting point can be determined.

After confirming the coordinates of the starting point, you can confirm the ratio of x and y according to the angle between the path and the horizontal and vertical lines. (Usually the included angle is 45 degrees)
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2022-04-19T06:31:28.953+00:00

I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.
Erich Brunner 21 Reputation points

2022-04-20T06:48:26.12+00:00

Please take a look on the inital question. I clarified my goal.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2022-04-20T08:31:28.043+00:00

I've updated my answer. Please check it.:)

Answer 2

Erich Brunner 21

Well I already found that sample. But that draws a path. I want to move an object like a BoxView or SVG icon along a path. So the path itself could be invisible. But I guess I already got it. I have to move an object like a BoxView with the Translate(x,y) method , point by point and do it similar to David Ortinau's screencast: https://www.youtube.com/watch?v=Q75npY6MToo to get any arbitrary path into code ;-)

Share via

How to move an SVG Icon along a (curvy) path of x/y coordinates in Xamarin.Forms

1 additional answer

Your answer