I have a list of items in a server. These items have scores and the scores correspond to the size of their view (a circle). I would like to depict these items with the largest circle in the center and each successively smaller circle wrapping around it, spiralling smaller and smaller.
Once I achieve this I would like to set it to a scroll. A scroll up will add each successively larger item to the center of the spiral and eventually spiralling down and away and vice versa.
The sizing of these objects I have performed already.
Here's my methodology: Native Swift doesn't have anything to help me layout-wise here to my knowledge. V/HStack won't help and neither will ScrollView. Essentially my understanding is that I should create a path that calculates its spiral based on the sizes of the items and these items should use .offset to position themselves on the path. Using a DragGesture, I can attach a #State variable to determine how far down the path each item is.
This is by far the most complex UI I've attempted so anything to get me down the right path is appreciated.
Edit 1:
Here is the ideal UI:
I'm sure there are various ways to approach this.
Dragging the "top" view down using a UIPanGestureRecognizer - and Scaling it during the drag - is pretty straight-forward. Getting the "already dragged" views to animate around the center is a bit tougher.
One approach is to use a UIViewPropertyAnimator and creating Key Frames for the positions around the arc.
Additional advantages to that include fewer calculations (set scaling and position key frames in .began state) as well as being able to "scrub" through the animation.
I put together a little demo that ended up looking like this:
You can play with the source code here: https://github.com/DonMag/OrbitDrag
Related
I have tried using the methods "Transform.scale" (for "zooming" ) and "Transform.translate" (for the moving), but they seem to trigger the paint method in the CustomPainter.
(even though the method "shouldRepaint" returns false, but that method is not even invoked)
Maybe there is some other way of doing what I want i.e. be able to move and zoom something I have created with a Canvas (without again executing the paint method)?
In the below example code there are three sliders, one for zooming out (i.e. reducing the size) and one for moving horizontally and one for moving vertically.
The "paint" method simply draws a polygon (see the below attached screenshot picture).
While the example code below is simple (i.e. small amount of hardcoded vector data and fast to render), I want to emphasize that the solution I am looking for need to support MANY complicated drawings (with LOTS OF data, slow to render), i.e. it is not an acceptable solution to suggest something like instead manually converting this one vector image to a raster image (e.g. PNG/JPG/GIF).
Below I try do describe how you can think regarding a scenario that need to be supported:
Imagine you want to implement an app with a huge dropdown list with lots of different vector data images to be selected.
The data of those VECTOR images may be retrieved from the internet or from a big local SQLite database.
IMPORTANT: The DATA in those images are NOT raster images such as jpg, png, gif... but the VECTOR data to become retrieved is defined as lots of screen coordinates for points, lines, polygons, and textual labels, and icons, and color values... and so on.
Such VECTOR data will then be used for creating the image, and as far as I understand you should use CustomPainter with the paint method unless there are better options?
Also imagine that each of such selected image with vector data is HUGE with MANY THOUSANDS of lines, polygons, icons, ... and so on, and that the paint method might take seconds for creating the image.
BUT, once it is drawn the data will not change.
So, since the "paint" method might take seconds to render a huge amount of vector data, you want to avoid invoking it frequently, when moving or zooming.
Therefore I think it would be desirable if it would be possible to use the method "shouldRepaint" to return false, but it seems as that method is not even invoked at all when resizing or moving with the Transform methods "scale" and "translate".
But maybe there is some other solution to support the above described scenario, maybe some other class than CustomPainter that do not automatically trigger the paint method when applying Transform scale/translate ?
I hope there is a solution with the Flutter framework somehow being able to automatically reuse the bitmap (e.g color values at certain bits and bytes) that was created potentially slowly with a paint method but can scale/zoom and move it in a faster way than having to execute the paint method again.
If you just want to zoom, scale, pan on your images, then you can try the new InteractiveViewer widget.
InteractiveViewer class
A widget that enables pan and zoom
interactions with its child.
The user can transform the child by dragging to pan or pinching to
zoom.
https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html
I've started implementing an iOS game with swift and SpriteKit.
I have an object called "bubble" which basically is an SKSpriteNode (with zPosition=0, with image) that have a child (which is an SKCropNode of a person image cropped to a circle, with zPozition=1).
That's ok if one bubble covers another bubble as a whole, but somehow it seems like the bubbles are partially covered with the person images.
a demo picture is provided: (my final output should be that bubble1 will be on top of child-of-bubble-2)
Maybe the problem is that SpriteKit ignores child ordering and just set any node with a zPozition to be in it's correct place? That is - all the bubbles are drawn first because they have zPosition=0 and then all the bubble-children are drawn, as they all have zPosition=1?
If this is the case, what can I do to make sure all bubble parts are drawn together (and other bubbles can cover that bubble, I don't care) knowing that I have a dynamic amount of bubbles?
well according to this SO answer, indeed all the zPosition values are calculated before drawing.
I ended up creating a counter for bubbles, adding 1 every time a bubble has been added, and assinging the counter value as its zPosition.
And inside the bubbles, I made sure every child has a zPosition in the range (0, 1)
If you need to draw things in a precise order, then I suggest you to read section Understanding the Drawing Order for a Node Tree of SKNode Apple's documentation. Everything is correctly describe in details.
I really want to know how to find the EXACT frame of an SKSpriteNode if it is rotated. Currently, the frame of an SKSpriteNode looks like this:
This frame is the rect.frame.
However, this frame includes a lot of empty space due to its zRotation. I don't want this empty space and instead want the frame of exactly the SKSpriteNode.
This is what I want:
How can I achieve this? If you have any idea how to find this 'exact' frame of an SKSpriteNode, I would really like to know. Please use SWIFT.
Thank you
This can be done.
Put a dummy node at the bottom left of your sprite that you know the exact size of. Probably use a perfect square. Anchor it's bottom left to the bottom left of your parent. The parent is the one you want the exact size definition of.
From there, two ways:
Scale the dummy sprite to the size of the sprite you're curious about, and use those measurements to determine where the sprite is and what size it is at any point in time.
Put another dummy sprite at the top right of the parent. In this case you can use the midpoint of your two dummy objects, you don't need to use their edges perfectly. Now you can find the position of these two dummies, at any time, and figure out the size/shape/outline of your sprite in world space units.
Here's way 1 animated
Is it possible to have irregularly shaped images positioned adjacent to each other, where each individual image is clickable within its own boundaries?
For example, if I had a map of the US and I want to click each state and have a separate segue for each:
(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Map_of_USA_with_state_names.svg/2000px-Map_of_USA_with_state_names.svg.png)
I appreciate any tips/pointers in the right direction. Thanks!
Whether the map is really a bunch of irregularly shaped images, or just one image, is immaterial. (The latter will be easier.) You can just define a separate UIBezierPath objects that outline each of the states, and then you can use the UIBezierPath method containsPoint to determine whether some tap point is contained within the respective state.
Frankly, you might consider how much accuracy you really need. For example, if looking at map of US from continental scale, you really don't need extremely accurate bezier paths. Often a simple irregular polygon shape can approximate the boundaries and is more than sufficient for hit tests.
In fact, you sometimes deliberately use a much bigger bezier path. For example, you might draw a single path that goes around all of the Hawaiian islands, with some leeway, so that you don't have to tap right on the actual island, but just somewhere close. Or, for Rhode Island, you might allow a tap on the text "Rhode Island", as well as the state itself.
OK, here's the deal:
I have two views: simple and advanced. On the iPad, they come with a big-ass map view, with a marker that can be moved to indicate a position.
Each view has a different instance of MkMapView. When I switch from one to the other, I want to keep the map at exactly the same position and zoom level, so the user feels as if it is the same map.
However, the shape of the map view is slightly different for each of the views. This is because the advanced search has more stuff above the map.
When I open the map (this is code from an abstract superclass, so both instances get it), I set the region and marker position, like so:
[mapSearchView setRegion:[mapSearchView regionThatFits:[[BMLTAppDelegate getBMLTAppDelegate] searchMapRegion]]];
[myMarker setCoordinate:[[BMLTAppDelegate getBMLTAppDelegate] searchMapMarkerLoc]];
searchMapRegion and searchMapMarkerLoc are static, and reflect the currently displayed map's region and marker location (the center of the map).
Here's the problem:
Because the map is a slightly different shape, there is always a bit of adjusting. This can "bounce" back and forth, so that the map zoom keeps decreasing every time you switch, until you are looking at the whole world.
It doesn't matter whether or not I use regionThatFits. The same thing happens, even with this code:
[mapSearchView setRegion:[[BMLTAppDelegate getBMLTAppDelegate] searchMapRegion]];
[myMarker setCoordinate:[[BMLTAppDelegate getBMLTAppDelegate] searchMapMarkerLoc]];
All I want, is for the exact same zoom and center to be displayed. I don't care is the advanced view cuts a bit off.
How do I get the $##!! MapKit to stop tweaking the zoom factor?
Just FYI. I solved this by creating a custom model layer class that maintains the scale and center point, and is used by multiple MKMapViews. It works pretty well, but the MapKit does sometimes tweak the scale very slightly to fit one of its "detents."