CODEWITHSUNDEEP
svguiviewswiftcore-graphicsuibezierpath
Jody Heavener
Jody Heavener

Reputation: 2874

Resize paths generated by PaintCode

I'm using PaintCode to convert a set of SVGs I have to use in to Swift code. It looks like it just converts the SVG paths in to UIBezierPath()s, which is great.

To display the generated code I'm doing the following:

class FirstImageView: UIView {

    init(name: String) { // Irrelevant custom init
        super.init(frame: CGRectMake(15, 15, 40, 40)) // 40x40 View
        self.opaque = false // Transparent background
    }

    override func drawRect(rect: CGRect) {
        ImagesCollection.firstImage() // Fill the view with this image
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

}

Where ImagesCollection.firstImage() is referencing:

public class ImagesCollection: NSObject {

    public class func firstImage() {
        let color4 = UIColor(red: 0.595, green: 0.080, blue: 0.125, alpha: 1.000)
        var fill295Path = UIBezierPath()
        fill295Path.moveToPoint(CGPointMake(27.5, 2.73))
        // Rest of generated graphics code
    }

}

Which works great - I generated the graphics at 40x40, set the frame to 40x40, and that works fine. What I'm wondering now, is how can I display that same graphic at a smaller (or larger size) - since they're bezier paths they should scale fine, right? Setting my View's frame to CGRectMake(15, 15, 20, 20) (for a desired 20x20 image) just seems to clip the graphic.

How can I ensure that whatever graphic is drawn in to my View is sized to the view's frame?

Thanks

Upvotes: 0

Views: 1429

Answers (3)

MirekE
MirekE

Reputation: 11555

Since you generated the code with PaintCode, you could draw their Frame object around your SVG/Bezier. It would generate the Bezier with dynamic size. In your example, you would get ImagesCollection.firstImage(#frame: CGRect) instead of ImagesCollection.firstImage(). You just pass the rectangle from drawRect to it and you are done.

Upvotes: 1

Jody Heavener
Jody Heavener

Reputation: 2874

Slightly off-topic, but per Nate's request here's how I did it with SVGKit:

  • Firstly, you'll want to incorporate SVGKit in your project by following these instructions
  • With the markup in your SVG file, parse the SVG data using the SVGKParser:

let svgData: String = "<svg>...</svg>"

let svgParse: SVGKParser = SVGKParser(source: SVGKSource(inputSteam: NSInputStream(data: svgData.dataUsingEncoding(NSUTF8StringEncoding, allowLossyConversion: false)!)))

svgParse.addDefaultSVGParserExtensions()

  • From there you'll load it into an image, using the SVGKImage type:

var svgImage: SVGKImage = SVGKImage(parsedSVG: svgResult, fromSource: nil)

  • And lastly, you can use it as the image in an SVGKFastImageView:

SVGKFastImageView(SVGKImage: svgImage)

Upvotes: 0

Nate Cook
Nate Cook

Reputation: 93296

You can use a CGAffineTransform to scale either your custom view or the bezier path itself.

  1. Scale the view:

    myFirstImageView.transform = CGAffineTransformMakeScale(0.5, 0.5)

  2. Scale the bezier path:

    // ...
// lots of generated graphics code
fill295Path.applyTransform(CGAffineTransformMakeScale(0.5, 0.5))
fill295Path.stroke() // or fill, etc.

Upvotes: 1

Related Questions