7

I'm using PaintCode to generate a stylekit for my xamarin.ios app. I have a simple logo that I pasted into PaintCode from illustrator. Everything looks fine, I have a frame and the generated draw method takes a rect.

At one point I had it resizing in my storyboard but it doesn't maintain the aspect ratio so obviously the logo looked wrong depending on the size of the UIView.

How can I add variables/expressions to paintcode so that the generated code automatically maintains the aspect ratio when the UIView is resized?

Thanks.

Dominique Vial
  • 3,729
  • 2
  • 25
  • 45
jmichas
  • 1,139
  • 1
  • 10
  • 21
  • Autolayout aspect ratio constraint ? – Alaeddine Jul 12 '15 at 14:31
  • No, this is specific to Paintcode (paintcodeapp.com). Paintcode generates a drawing method for vector assets but by default it does not maintain aspect ratio, I assume this needs to be implemented manually but I'm not sure how. – jmichas Jul 12 '15 at 15:14
  • it's a UIView so you can setup constraints I guess – Alaeddine Jul 12 '15 at 15:15

1 Answers1

7

This is possible with Variables. Try creating two Variables like this:

  1. Numeric “Width” with a value for example 100.
  2. Expression “Height” with a value width / 2. This would maintain a ratio of 2:1, change as you need.

Then attach these two to your Frame object on Width and Height attributes. After that, the generated method will take only one numeric parameter – the Width:

- (void)drawMyCanvasWithWidth: (CGFloat)width;

Should look like on this image:

Preview

Then just pass your desired width and the height will be calculated automatically.

It would also be possible to maintain CGRect parameter of the method and to find fitting rectangle using Variables. I’ll add that if you ask.

Tricertops
  • 8,492
  • 1
  • 39
  • 41
  • 1
    Yeah, this is sort of what I came up with. I setup variables for expressions for aspect ratio and then used those to generate an adjusted height and set that to be the height of my frame. But, I need to refine it so that it works either way whether the height or width is the pinned value. Your code pins the width but if you make a UIView and change the height you can clip the image. I want it so that if the height would clip the image then the height is then used as the pinned value and we generate a width. I think this is possible with an expression that uses makeRect() in paintcode. – jmichas Jul 13 '15 at 20:50
  • 2
    Ok so this worked, I have a Rect variable that is set to the size of the canvas. Then I have a variable for the aspect ratio that uses constants. Then I created an expression that had this: `logoMarkFrame.height < (logoMarkFrame.width/logoMarkAspectRatio) ? makeRect(0,0,logoMarkFrame.height*logoMarkAspectRatio,logoMarkFrame.height) : makeRect(0,0,logoMarkFrame.width,logoMarkFrame.width/logoMarkAspectRatio)` Then connect that to the frame in my canvas and it works fine. The next step I think would be keeping it centered when the height is smaller than the width/ar. – jmichas Jul 13 '15 at 21:16