cssfixed缩小自动偏移

Posted 2023-05-06

CSS fixed 缩小自动偏移是指在使用CSS时，可以使用fixed属性来缩小自动偏移，以便更好地控制元素的位置。fixed属性可以让元素固定在一个位置，而不会受到其他元素的影响，从而更好地控制元素的位置。使用fixed属性可以有效的减少自动偏移，从而更好地控制元素的位置。 参考技术A CSS Fixed 缩小自动偏移是一种CSS属性，它可以让您的元素在缩小时保持原有的偏移量，而不会受到缩放的影响。这对于创建响应式网站非常有用，因为它可以让您的元素在不同的屏幕尺寸下保持原有的位置和大小。要使用CSS Fixed缩小自动偏移，您可以使用CSS属性“transform：scale（）”，并将其值设置为您想要的缩放比例，例如：transform：scale（0.5）。这将使您的元素缩小50％，而不会改变其偏移量。

iOS：在放大/缩小父视图时忽略具有中心偏移的子视图（因此不是十字准线！！）

【中文标题】iOS：在放大/缩小父视图时忽略具有中心偏移的子视图（因此不是十字准线！！）

【英文标题】：iOS: subviews with centeroffset (hence not crosshair!!) ignored while zooming in/out the parent view

【发布时间】：2013-10-14 08:45:40

【问题描述】：

我有：

UIScrollView

UIImageView 作为前一个滚动视图的子视图（这是一个非常大的背景图像，带有 1 个绿色圆圈和 1 个红色圆圈）。它有 2 个两个子视图：

第一个图钉图像（白色十字） 第二个图钉（橙色的自定义地图图钉）

两个图钉都必须指向它们的圆心：

白色十字的中心必须在绿色圆圈的中心 橙色地图图钉的底峰必须位于红色圆圈的中心。

这是所需的行为，当应用程序启动时，我得到了它。 （我还成功地应用了反转变换来防止两个引脚在缩放时与大背景图像一起缩放（正如 Andrew Madsen 在另一篇文章中所解释的那样）。问题 当我放大/缩小时，橙色针（有一种“centerOffset”）似乎向上/向下移动，因为它的底峰失去了红色圆圈的中心。 （虽然白色十字是可以的，因为它总是以圆圈为中心）

在此处查看 1 个正确行为示例（在启动时）和 2 个错误行为示例：https://www.dropbox.com/s/8stjh892wm8yfdb/123.png

我还尝试为橙色图钉子类化一个 MKAnnotationView，并设置 centerOffset：

self.centerOffset = CGPointMake(0,-self.image.size.width/2); 

在 - (void)setAnnotation:(id <MKAnnotation>)annotation，但它被忽略（可能是因为它不在 mkmapview 上）。

如何在放大/缩小时将橙色图钉的底峰设置为跟随红色圆圈的中心？ 我重复一遍以澄清：我不希望橙色针的 中心 始终位于红色圆圈的中心，我希望 底峰橙色大头针的strong>始终位于红色圆圈的中心。

这里是 ViewController 的示例代码

#import <QuartzCore/QuartzCore.h>
#import "TestViewController.h"


@implementation TestViewController

@synthesize scrollView;

//SLImageView is my extension of UIImageView with the invertedTransform (see: http://***.com/questions/12981201/keep-subviews-of-uiscrollview-from-resizing)
@synthesize backgroundImageView;

- (void)viewDidLoad

    [super viewDidLoad];
    UIImage *image = [UIImage imageNamed:@"circles.png"];


    self.backgroundImageView = [[SLImageView alloc] initWithImage:image];
    self.backgroundImageView.frame = (CGRect).origin=CGPointMake(0.0f, 0.0f), .size=image.size;
    [self.scrollView addSubview:self.backgroundImageView];

    // Tell the scroll view the size of the contents
    self.scrollView.contentSize = image.size;




- (void)viewWillAppear:(BOOL)animated

    [super viewWillAppear:animated];

    // Set up the minimum & maximum zoom scales
    CGRect scrollViewFrame = self.scrollView.frame;
    CGFloat scaleWidth = scrollViewFrame.size.width / self.scrollView.contentSize.width;
    CGFloat scaleHeight = scrollViewFrame.size.height / self.scrollView.contentSize.height;
    CGFloat minScale = MIN(scaleWidth, scaleHeight);
    self.scrollView.minimumZoomScale = minScale;
    self.scrollView.maximumZoomScale = 4.0f;
    self.scrollView.delegate = self;

    UIImageView *topWhiteCrossPin = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cross.png"]];
    topWhiteCrossPin.center = CGPointMake(110, 304);

    UIImageView *topOrangeMapPin = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"centerOffsetPin.png"]];
    topOrangeMapPin.center = CGPointMake(284, 288);

    [backgroundImageView addSubview:topWhiteCrossPin];
    [backgroundImageView addSubview:topOrangeMapPin];

    self.scrollView.zoomScale = minScale * 3.5;



- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

    return backgroundImageView;



@end

在这里完成示例 xcode 项目：https://www.dropbox.com/s/rvohsn1wemd4lyj/AffineTransformExample.zip

提前致谢。 米克

【问题讨论】：

经过一夜的测试，我终于找到了诀窍，而且非常简单。添加 [topOrangeMapPin.layer setAnchorPoint:CGPointMake(0.5, 1)];就在 topOrangeMapPin.center = CGPointMake(284, 308); 之后。这会将锚点设置在橙色针脚底部的中间，就在它的峰值处。任何后续的仿射变换都将使用这个新的锚点。对于像我这样的初学者来说，这个技巧并不是那么明显。

【参考方案1】：

经过一个晚上的测试，我终于找到了诀窍，而且非常简单。在topOrangeMapPin.center = CGPointMake(284, 308); 之后添加[topOrangeMapPin.layer setAnchorPoint:CGPointMake(0.5, 1)];。这会将锚点设置在橙色图钉底部的中间，也就是它的顶点。任何后续的仿射变换都将使用这个新的锚点。对于我这样的初学者来说，这个技巧并不那么明显