Question

我正在构建一个应用程序，我希望向用户展示平面图，这是一种互动，这意味着他们可以点击每个区域来缩放这些并找到更精细的细节。

我从后端获得JSON响应，其中包含楼层平面图，形状信息和点的元数据信息。我打算用石英解析点并在视图上绘制形状（开始学习Quartz2d）。首先，我采用了一个简单的蓝色打印，如下图所示。

根据蓝图，中心位于（0,0），有4个点。

以下是我从后端获取蓝图的要点。

X:-1405.52, Y:686.18
X:550.27, Y:683.97
X:1392.26, Y:-776.79
X:-1405.52, Y:-776.79

我试图画这个

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code

            for (Shape *shape in shapes.shapesArray) {
                CGContextRef context = UIGraphicsGetCurrentContext();
                CGContextSetLineWidth(context, 2.0);
                CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
                BOOL isFirstPoint = YES;
                for (Points *point in shape.arrayOfPoints) {
                    NSLog(@"X:%f, Y:%f",point.x,point.y);
                    if (isFirstPoint) {
                        CGContextMoveToPoint(context, point.x, point.y);
                        //[bpath moveToPoint:CGPointMake(point.x,point.y)];
                        isFirstPoint = NO;
                        continue;
                    }
                    CGContextAddLineToPoint(context, point.x, point.x);

                }
                CGContextStrokePath(context);
            }

}

但是我得到的结果如下图所示，看起来不正确

问题：

我是否正确地实现了这个目标？
如何在-ve方向绘制点？
根据坐标，绘图将非常庞大，我想首先绘制它然后缩小以适应屏幕，以便用户以后可以放大/平移等等

更新

我已经使用翻译和缩放实现了一些基本功能。现在的问题是我如何将绘制的内容与视图边界相匹配。因为我的坐标非常大，所以它超出范围，我希望它适合。

请在下面找到我所拥有的测试代码。知道如何适应吗？

DrawshapefromJSONPoints

Answer 1

一些观察结果：

使用quartz时没有错误，但您可能会发现使用OpenGL更灵活，因为您提到了命中测试区域的要求并扩展了模型实时。

您的代码假设有序点列表，因为您使用CGContextMoveToPoint绘制路径。如果这是由数据合同保证那么好;但是，如果您的JSON中返回了多个已关闭的路径，则需要编写更智能的渲染器。

问题2＆amp; 3可以用计算机图形学中的引物覆盖（特别是模型 - 视图矩阵和转换）。如果世界坐标以(0,0,0)为中心，则可以通过对每个顶点应用标量来缩放顶点。当您不使用quartz-2d坐标系(0,0)-(w, h)

时，负轴上的绘制点会更有意义

Answer 2

我找到了解决问题的方法。现在，我能够从一组点绘制形状并将它们装配到屏幕上，并使它们变焦而不会丢失质量。请在下面找到项目的链接。这可以调整为支持颜色，不同的形状，我目前只处理多边形。

DrawShapeFromJSON

iOS：Quartz2d绘制平面图

2 个答案: