Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You could easily use a CALayerShape with a Pen Image and do it like this (I added a button to the view which triggered the drawing): </p> <pre><code>#import "ViewController.h" @interface ViewController () { UIBezierPath *_drawPath; CALayer *_pen; UIBezierPath *_penPath; CAShapeLayer *_rectLayer; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIImage *penImage = [UIImage imageNamed:@"pen"]; _drawPath = [UIBezierPath bezierPathWithRect:self.view.frame]; _penPath = [UIBezierPath bezierPath]; [_penPath moveToPoint:CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f)]; [_penPath addLineToPoint:CGPointMake(self.view.frame.size.width - penImage.size.width/2.f, penImage.size.height/2.f)]; [_penPath addLineToPoint:CGPointMake(self.view.frame.size.width - penImage.size.width/2.f, self.view.frame.size.height - penImage.size.height/2.f)]; [_penPath addLineToPoint:CGPointMake(penImage.size.width/2.f, self.view.frame.size.height - penImage.size.height/2.f)]; [_penPath addLineToPoint:CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f)]; _rectLayer = [[CAShapeLayer alloc] init]; _rectLayer.path = _drawPath.CGPath; _rectLayer.strokeColor = [UIColor greenColor].CGColor; _rectLayer.lineWidth = 5.f; _rectLayer.fillColor = [UIColor clearColor].CGColor; _rectLayer.strokeEnd = 0.f; [self.view.layer addSublayer:_rectLayer]; _pen = [CALayer layer]; _pen.bounds = CGRectMake(0, 0, 25.f, 25.f); _pen.position = CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f); _pen.contents = (id)(penImage.CGImage); _pen.position = CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f); [self.view.layer addSublayer:_pen]; } - (IBAction)drawRectangle:(id)sender { _rectLayer.strokeEnd = 1.f; CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; anim.fromValue = (id)[NSNumber numberWithFloat:0]; anim.toValue = (id)[NSNumber numberWithFloat:1.f]; anim.duration = 5.f; anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; [_rectLayer addAnimation:anim forKey:@"drawRectStroke"]; CAKeyframeAnimation *penMoveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; penMoveAnimation.path = _penPath.CGPath; penMoveAnimation.rotationMode = kCAAnimationRotateAuto; penMoveAnimation.duration = 5.0; penMoveAnimation.calculationMode = kCAAnimationPaced; [_pen addAnimation:penMoveAnimation forKey:@"followStroke"]; } </code></pre> <p>EDIT: Added code for pen to follow stroke, heres the 2x image used: <a href="http://cl.ly/image/173J271Y003B" rel="nofollow">http://cl.ly/image/173J271Y003B</a> </p> <p>Note: The only problem is that when the pen gets closer to the rotating point or corner its still paced with the stroke therefore the pen looks like its behind the stroke a bit until it flips, a simple solution might be to arc the curve, but Im not sure what your overall goal is.</p>
    singulars
    1. This table or related slice is empty.
    1. POHow to draw a rectangle with an animated stroke
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJAManfredi
    1. USJAManfredi
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to draw a rectangle with an animated stroke
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COhow would you keep the pen image in sync with animation? I think thats an important part of the answer that is missing.
      singulars
      1. PO
      1. USBrad Allred
    2. COMarking this correct, but as Brad suggests it would be interesting to know if there's a way to sync a UIImageView with the animation.
      singulars
      1. PO
      1. USsoleil
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload