У меня есть UIImageView, отображающий изображение. Я хочу "выделить" часть изображения, рисуя округленный контур прямоугольника. Я хотел бы, чтобы контур рисовался с толстой пунктирной линией, которая "оживляет", постоянно меняясь там, где начинается "начало" линии.
Я подумал о том, чтобы рисовать круг, который имел вид, который я хочу, а затем просто анимировал его, но мне действительно нужно прямоугольное решение, так что.
Фон:
Я рисую закругленную границу прямоугольника, вычисляя 8 точек и рисуя 4 прямых и 4 кривых. (Может быть, это может быть проще, но это не сломанная часть!)
Мое мышление заключается в том, что я буду использовать переменную "смещение", которая начинается в верхнем левом углу закругленного прямоугольника, где верхняя левая кривая встречает верхнюю прямую фигуру. Затем я увеличиваю это "смещение" по верхней части закругленного прямоугольника до тех пор, пока он не достигнет верхней правой кривой, после чего "reset" изменят значение "offset" до его исходного значения.
Это работает в значительной степени, как хотелось бы, до появления "reset". На данный момент анимация является отрывистой (вроде ожидаемой), но также кажется, что она движется в обратном направлении в течение небольшой части времени, прежде чем возобновить движение вперед. Наконец, в начале/конце моей пунктирной линии я получаю дополнительный длинный сегмент на пунктирной линии. Я знаю, что они не могут быть равными (могут ли они? Как вычислить?), Но как я могу сделать 2 более коротких сегмента, а не более 1 сегмент?
У кого-нибудь есть представление о том, что я могу сделать, чтобы получить гладкий вид "маршевых муравьев"? Любые другие идеи о хорошем способе (с использованием анимации) вызвать глаза пользователя на конкретную область экрана? (Он должен окружать определенную область, не заслоняя ее.)
Текущий код:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
// Rounded corner will be 10% of average side length (i.e., (w + h) / 2)
float averageSide = ([self HighlightRect].size.width + [self HighlightRect].size.height) / 2.0;
float roundSize = averageSide * 0.10;
// offset is a static, class variable
offset += roundSize / 4.0;
if ([WhereIAmView offset] < roundSize) {
offset = roundSize;
}
if ([WhereIAmView offset] > ([self HighlightRect].size.width - roundSize)) {
offset = roundSize;
}
// Set the "main" color of the rounded rectangle
UIColor *lineColor = [UIColor colorWithRed:027.0/255.0 green:050.0/255.0 blue:224.0/255.0 alpha:1.0];
CGContextSetStrokeColorWithColor(context, [lineColor CGColor]);
CGContextSetLineWidth(context, 16.0);
CGFloat pattern[] = {25.0, 5.0};
CGContextSetLineDash(context, offset, pattern, 2);
CGRect rRect = [self HighlightRect];
// The top left corner
CGPoint topLeft = CGPointMake(rRect.origin.x, rRect.origin.y);
// The top right corner
CGPoint topRight = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y);
// The bottom right corner
CGPoint bottomRight = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y + rRect.size.height);
// The bottom left corner
CGPoint bottomLeft = CGPointMake(rRect.origin.x, rRect.origin.y + rRect.size.height);
// The two points across the top of the rounded rectangle (left to right)
CGPoint point1 = CGPointMake(rRect.origin.x + roundSize, rRect.origin.y);
CGPoint point2 = CGPointMake(rRect.origin.x + rRect.size.width - roundSize, rRect.origin.y);
// The two points along the right of the rounded rectangle (top to bottom)
CGPoint point3 = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y + roundSize);
CGPoint point4 = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y + rRect.size.height - roundSize);
// The two points along the bottom of the rounded rectangle (right to left)
CGPoint point5 = CGPointMake(rRect.origin.x + rRect.size.width - roundSize, rRect.origin.y + rRect.size.height);
CGPoint point6 = CGPointMake(rRect.origin.x + roundSize, rRect.origin.y + rRect.size.height);
// The two points along the left of the rounded rectangle (bottom to top)
CGPoint point7 = CGPointMake(rRect.origin.x, rRect.origin.y + rRect.size.height - roundSize);
CGPoint point8 = CGPointMake(rRect.origin.x, rRect.origin.y + roundSize);
// Move to point 1
CGContextMoveToPoint(context, point1.x, point1.y);
// Add line to point 2 (this is the straight portion across the top)
CGContextAddLineToPoint(context, point2.x, point2.y);
// Add curve to point 3 (this is the rounded portion in top right)
CGContextAddArcToPoint(context, topRight.x, topRight.y, point3.x, point3.y, roundSize);
// Add line to point 4 (this is the straight portion across the right)
CGContextAddLineToPoint(context, point4.x, point4.y);
// Add curve to point 5 (this is the rounded portion in bottom right)
CGContextAddArcToPoint(context, bottomRight.x, bottomRight.y, point5.x, point5.y, roundSize);
// Add line to point 6 (this is the straight portion across the bottom)
CGContextAddLineToPoint(context, point6.x, point6.y);
// Add curve to point 7 (this is the rounded portion in bottom left)
CGContextAddArcToPoint(context, bottomLeft.x, bottomLeft.y, point7.x, point7.y, roundSize);
// Add line to point 8 (this is the straight portion across the left)
CGContextAddLineToPoint(context, point8.x, point8.y);
// Add curve to point 1 (this is the rounded portion in top left)
CGContextAddArcToPoint(context, topLeft.x, topLeft.y, point1.x, point1.y, roundSize);
// Stroke the path
CGContextStrokePath(context);
}
шишка bump bump