获取 Image 的 UIBezierPath 没有透明区域

get Image's UIBezierPath without transparent area

提问人:Erhan Demirci 提问时间:8/17/2023 最后编辑:Erhan Demirci 更新时间:8/18/2023 访问量:87

问:

我有一个透明的图像,形状是这样的。我们可以提取这张图片吗?例如,我可以在课堂上自己画一个六边形,但我无法得到这个形状。UIBezierPathUIViewUIBezierPath

enter image description here

原始图像:orjinalImage

class FreeShapeView: UIView {
    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        context?.clear(rect)
      
        context?.setAllowsAntialiasing(true)
        context?.setShouldAntialias(true)
        context?.setLineJoin(CGLineJoin.round)
        
        let edge: CGFloat = 5.9/2

        let path: UIBezierPath = UIBezierPath()
        
        path.move(to: CGPoint(x: rect.width/2, y: edge))
        path.addLine(to: CGPoint(x: rect.width - edge, y: rect.height/3))
        path.addLine(to: CGPoint(x: rect.width - edge, y: rect.height/3*2))
        path.addLine(to: CGPoint(x: rect.width/2, y: rect.height - edge))
        path.addLine(to: CGPoint(x: edge, y: rect.height/3*2))
        path.addLine(to: CGPoint(x: edge, y: rect.height/3))
        
        path.close()
        context?.addPath(path.cgPath)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .clear
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        backgroundColor = .clear
    }
}

我的 OpenCV 目标 C 代码

      + (UIBezierPath *)removeTransparentAreaAndFindContours:(UIImage *)image {
    // Convert UIImage to cv::Mat
   
    cv::Mat cvImage = [self cvMatFromUIImage:image];


    // Convert image to grayscale
    cv::Mat grayscaleImage;
    cv::cvtColor(cvImage, grayscaleImage, cv::COLOR_RGBA2GRAY);

    // Apply threshold to create binary image
    cv::Mat binaryImage;
    cv::threshold(grayscaleImage, binaryImage, 1, 255, cv::THRESH_BINARY);

    // Find contours
    std::vector<std::vector<cv::Point>> contours;
    std::vector<cv::Vec4i> hierarchy;
    cv::findContours(binaryImage, contours, hierarchy, cv::RETR_EXTERNAL, cv::CHAIN_APPROX_SIMPLE);

    // Create a UIBezierPath from the contours
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    for (size_t i = 0; i < contours.size(); i++) {
        const std::vector<cv::Point> &contour = contours[i];
        for (size_t j = 0; j < contour.size(); j++) {
            const cv::Point &point = contour[j];
            CGPoint cgPoint = CGPointMake(point.x, point.y);
            if (j == 0) {
                [bezierPath moveToPoint:cgPoint];
            } else {
                [bezierPath addLineToPoint:cgPoint];
            }
        }
        [bezierPath closePath];
    }

    return bezierPath;
}

+ (cv::Mat)cvMatFromUIImage:(UIImage *)image {
    CGColorSpaceRef colorSpace = CGImageGetColorSpace(image.CGImage);
    CGFloat cols = image.size.width;
    CGFloat rows = image.size.height;
    cv::Mat cvMat(rows, cols, CV_8UC4); // 8 bits per channel, 4 channels (RGBA)

    CGContextRef contextRef = CGBitmapContextCreate(cvMat.data, cols, rows, 8, cvMat.step[0], colorSpace, kCGImageAlphaNoneSkipLast | kCGBitmapByteOrderDefault);
    CGContextDrawImage(contextRef, CGRectMake(0, 0, cols, rows), image.CGImage);
    CGContextRelease(contextRef);

    return cvMat;
}

我得到了这样的结果.

Element 1: Type = MoveToPoint, Points = (0.0, 0.0) (6.9370081173396e-310, 0.0) 
Element 2: Type = AddLineToPoint, Points = (0.0, 794.0) (6.9370081173396e-310, 0.0) 
Element 3: Type = AddLineToPoint, Points = (619.0, 794.0) (6.9370081173396e-310, 0.0) 
Element 4: Type = AddLineToPoint, Points = (620.0, 795.0) (6.9370081173396e-310, 0.0) 
Element 5: Type = AddLineToPoint, Points = (620.0, 1270.0) (6.9370081173396e-310, 0.0) 
Element 6: Type = AddLineToPoint, Points = (1998.0, 1270.0) (6.9370081173396e-310, 0.0) 
Element 7: Type = AddLineToPoint, Points = (1998.0, 0.0) (6.9370081173396e-310, 0.0) 
Element 8: Type = CloseSubpath, Points = (1998.0, 0.0) (6.9370081173396e-310, 0.0) 

测试代码为:

 path = UIBezierPath()
        
        path.move(to: CGPoint(x: 0.0, y: 0.0))
        path.addLine(to: CGPoint(x:0.0 , y:794.0 ))
        path.addLine(to: CGPoint(x:619.0 , y:794.0 ))
        path.addLine(to: CGPoint(x: 620.0, y: 795.0 ))
        path.addLine(to: CGPoint(x:620.0 , y:1270.0 ))
        path.addLine(to: CGPoint(x: 1998.0, y:1270.0 ))
        path.addLine(to: CGPoint(x:1998.0 , y: 0.0))
        
        path.close()
        context?.addPath(path.cgPath)

但它是这样画的:

enter image description here

我做错了什么?谢谢

iOS Swift OpenCV UIViView UIBEZIERPATH

评论

0赞 DonMag 8/18/2023
如果您有一个简单的图像,例如您发布的图像,则可以使用泛滥填充算法并跟踪连续的 alpha 或非 alpha 像素。可能会很慢,除非你提前知道“会发生什么”。否则,您可能需要查看VNDetectContoursRequest / VNContoursObservation
0赞 Erhan Demirci 8/18/2023
谢谢。我要看看他们.我现在正在使用 OpenCV,但我没有成功。我现在要编辑提问
0赞 DonMag 8/18/2023
好的 - 你从你的图像中得到了“形状”的路径......你的问题是什么?
0赞 Erhan Demirci 8/18/2023
你确定我用这个结果得到图像的形状吗?但是我不能在uiview类中画画。今天努力工作,也许我失去了一些东西
0赞 DonMag 8/18/2023
这是我使用这些点得到的形状:i.stack.imgur.com/WlWSp.png

答:

1赞 DonMag 8/18/2023 #1

您的原始图像大小为 。5997 x 3811

生成的坐标为您提供了一个边界框大小为 的坐标。我不使用 ,但它似乎是基于设备比例的 - 所以你得到的是以点而不是像素为单位的坐标。UIBezierPath1998.0 x 1270.0OpenCV@3x

在任何情况下,如果您只是尝试在视图中绘制路径,则只能看到路径的左上角。1998.0 x 1270.0300 x 300

如果缩放路径以适合视图,则会看到整个路径:

    let path = UIBezierPath()
    
    path.move(to: CGPoint(x: 0.0, y: 0.0))
    path.addLine(to: CGPoint(x:0.0 , y:794.0 ))
    path.addLine(to: CGPoint(x:619.0 , y:794.0 ))
    path.addLine(to: CGPoint(x: 620.0, y: 795.0 ))
    path.addLine(to: CGPoint(x:620.0 , y:1270.0 ))
    path.addLine(to: CGPoint(x: 1998.0, y:1270.0 ))
    path.addLine(to: CGPoint(x:1998.0 , y: 0.0))
    
    path.close()

    let scale: CGFloat = bounds.width / path.bounds.width
    
    let tr = CGAffineTransform(scaleX: scale, y: scale)
    path.apply(tr)

评论

0赞 Erhan Demirci 8/18/2023
非常感谢。它真的解决了