How can I determine the area currently visible in a scrollview and determine the center? - iphone

I have a map app where the user can place waypoints manually. I would like for them to press the waypoint button and have a waypoint placed in the center of their currently visible view on the content view.

I'm afraid you'd have to calculate it yourself. contentSize returns size of the scrolled content, contentOffset gives you the origin of the scroll view inside the content. Then with scrollView.bounds.size you can find the center of the view.
Haven't tested this, but maybe you could convert scrollView.center to your scrolled map like this:
CGPoint viewportCenterInMapCoords =
[scrollView.superview convertPoint:scrollView.center
toView:mapViewInsideScrollView];

Need to account for how zoomed it is, then I can convert the content offset to the size of the full image and add some.
/// this is the full size of the map image
CGSize fullSize = CGPointMake(13900, 8400);
/// determines how the current content size compares to the full size
float zoomFactor = size.width/self.contentSize.width;
/// apply the zoom factor to the content offset , this basically upscales
/// the content offset to apply to the dimensions of the full size map
float newContentOffsetX = self.contentOffset.x*zoomFactor + (self.bounds.size.width/2) *zoomFactor-300;
float newContentOffsetY = self.contentOffset.y*zoomFactor + (self.bounds.size.height/2) * zoomFactor-300;
/// not sure why i needed to subtract the 300, but the formula wasn't putting
/// the point in the exact center, subtracting 300 put it there in all situations though
CGPoint point = CGPointMake(newContentOffsetX,newContentOffsetY );

Related

Math doesn't work for the size and position of Game Pieces WRT the size of their container "room"

The positions and sizes of my Game Pieces, as set by CGPoint(..) and CGRect(..), don’t make arithmetic sense to me when looked at with respect to the width and height of the surrounding container of all Game Pieces?
Let me illustrate with just one specific example –
I call the surrounding container = “room”.
One of many specific Game Pieces = “rock”.
Here’s the math
roomWidth = Double(UIScreen.main.bounds.width)
roomHeight = Double(UIScreen.main.bounds.height)
While in Portrait mode:
roomWidth = 744.0
roomHeight = 1133.0
When rotated to Landscape mode:
roomWidth = 1133.0,
roomHeight = 744.0
So far so good .. here’s the problem:
When I look at my .sks file, the width of the “rock” and its adjacent game pieces far exceeds the roomWidth; for example,
Widths of rock + paddle + tree = 507 + 768 + 998 which obviously exceeds the room’s width for either Portrait or Landscape mode – and this math doesn’t even address the separation between Game Pieces.
The final math “craziness” looks at the swift xPos values for each Game Piece as specified in my .sks file:
Room: xPos = 40,
Rock: xPos = -390,
Paddle: xPos = -259,
Tree: xPos = 224
I cannot grasp the two high negative numbers .. to me, that means the Rock and the Paddle shouldn’t even be visible .. seriously off-screen.
One significant addition = I did set the Autoresizing Mask to center horizontally and vertically
I need a serious infusion of “smarts” here.
The default anchorPoint of an sks file (SpriteKit Scene file) is (0.5, 0.5). So the origin (0, 0) of the scene is drawn at the center of the SKView. You can change the anchor point in the Attributes inspector when editing the sks file. The default means that negative coordinates not too far from the origin will be visible in the SKView.
The scene also has a scaleMode property which determines how the scene is scaled if its size doesn't match the SKView's size. The default is .fill, which means the view scales the scene's axes independently so the scene's size exactly fills the view.

Draw images on a canvas next to each other without space in flutter

I'm creating a game in flutter. I'm using a tilesheet to render tiles. I chop the image in 50x50 sections and then render them depending on their surrounding.
The tiles are rendered at the position of their corresponding "game object". In order to keep the code clean from details about converting from the game world positions and sizes to actual screen sizes my painting classes always obtain world space and then scales it up to screen space.
However, after scaling up the tiles I'm sometimes left with gaps between the tiles.
I've tried:
Placing the tiles at their appropriate screen position, without scaling the canvas first, in case the scaling produces the problem.
Adding borders around the tiles in the tilesheet in case the canvas.drawImageRect samples too many pixels.
Making the board take a size divisible by the number of tiles, in case there is a rounding error.
Drawing a subsection of the tile.
I can't seem to make the gap disappear. Do you have any suggestions?
Below is the relevant drawing code, where size and position are in world space and frameX and frameY is the positions to extract from the spritesheet.
void drawFrameAt(int x, int y, Canvas canvas, Offset position, Size size) {
var frameX = x * frameWidth;
var frameY = y * frameHeight;
var rect = Rect.fromLTWH(frameX, frameY, frameWidth, frameHeight);
var width = size.width;
var height = size.height;
var destination = Rect.fromLTWH(position.dx, position.dy, width, height);
canvas.drawImageRect(image, rect, destination, Paint());
}

Write text on existing pdf rotated page

I am developing an application with iText 7 (7.1.14) to write a text on the top right of existing PDFs.
I have a problem with rotated pages, example 90, 270.
I tried to apply AffineTransform.getRotateInstance to canvas but nothing.
PdfFont bf = PdfFontFactory.createFont(FontConstants.HELVETICA);
float stringWidth = bf.getWidth(stringa,fontSize);
PdfCanvas canvas=new PdfCanvas(page, true);
float centeredPosition = pageSize.getWidth() - (pageSize.getWidth()/30);
float yCoord = (pageSize.getHeight()-fontSize-5);
float xCoord = centeredPosition-stringWidth;
canvas.beginText().setFontAndSize(bf, fontSize)
.moveText(xCoord, yCoord)
.showText(stringa)
.setTextRenderingMode(pageN)
.endText();
You want to add text that is displayed at the top right of the page, even after page rotation has been applied to the page.
Make sure you get the page size with the rotation taken into account, so your coordinate calculations are correct for the rotated page:
Rectangle pageSize = page.getPageSizeWithRotation();
For an A4 page with 90 degree rotation, for example, this returns 842x595 instead of 595x842.
Then "ignore" the page rotation when adding new content:
page.setIgnorePageRotationForContent(true);
This essentially applies the appropriate counterrotation for the added text, which cancels out the page rotation, so the text is seemingly not rotated.

FramerJS - Horizontal scrollbar with the scroll component

I have created a scrollable area and i am trying to add a scrollbar underneath the images (the blue scrollbar in the linked image)
Code that i currently have for the scrollable area.
scroll = new ScrollComponent
opacity: 1.00
shadowBlur: 0
scroll.size = screen
Info.parent = scroll.content
scroll.scrollVertical = false
Scroll
I think you're trying to make a scrollbar that moves with the scrolling and shows how far along the user has scrolled, right?
Here's some code how to do that:
scrollbar.parent = scroll
# First make the width of the scrollbar relative to the size of the content.
scrollbar.width = (scroll.width / scroll.content.width) * scroll.width
# When the scroll is moved
scroll.onMove ->
# Calculate the width that we should scroll over
width = scroll.content.width - scroll.width
# Calculate the percentage that has currently been scrolled
percentage = scroll.scrollX / width
# Calculate how much space there for the scrollbar to move in
freeSpace = scroll.width - scrollbar.width
# Set the position of the scrollbar relative to the free space and the percentage scrolled
scrollbar.x = freeSpace * percentage
A full example is here: https://framer.cloud/QtcLD

UIScrollView: content offset calculation after zoom

Could somebody advice which formula used to content offset calculation after zoom in UIScrollView? Let's consider following example:
I have a UIScrollView with content view in size (1000, 1000), then if I programmatically setZoomScale to 2.0 and in scrollViewDidEndZooming:withView:atScale method I will have the following:
contentSize before zoom = {1000, 1000}
contentOffset before zoom = {0, 0}
scale = 2.000000
contentSize after zoom = {2000, 2000}
contentOffset after zoom = {160, 230}
I need to know how the new value of contentOffset {160, 230} calculated. Is there any dependency of formula that used to calculate the content offset in this case?
Thanks
This may or may not be relevant, but note that 160x230 is half the resolution of the iPhone, less the status bar: 320x460. Try changing the UIScrollView's frame, or its superview's frame, and see how this affects the numbers.
EDIT: Come to think of it, it makes perfect sense that the offset is half the size of the scroll view, as it will expand equally in both directions. So, the formula would be: contentOffset = (scrollView.frame.size.width/2 * (scaleAfter - scaleBefore), scrollView.frame.size.height/2 * (scaleAfter - scaleBefore)).
Therefore, if the scale was 4.0f, the offset would be: (320/2 * (4-1), 460/2 * (4-1)) => (480, 690). Try a scale of 4 and see if (480, 690) comes out.