CALayer
custom内のcustom を使用して UI 要素を実装しようとしていますUIView
。
基本的に、ユーザーは指で円を描くようにスライダーを動かすので、インタラクション用のレイヤーとCAShapeLayer
、スライダー自体を表す type のサブレイヤーがあります。スライダーを円の周りに移動する最も簡単な方法はCAShapeLayer
、z 軸を中心に を回転させることだと思いました。
スライダーは視覚的に期待どおりに回転しますが、受け取ったタッチでヒット テストを実行すると、「ヒット可能」領域はスライダーの回転前の位置に残ります。の回転の視覚効果が、レイヤーのプロパティを形成するためにレイヤーの内部に埋め込まれているCAShapeLayer
から切り離されているかのようです。これは、スライダーのタッチを認識するためにそのパスを と組み合わせて使用しているためです。UIBezierPath
path
CGPathContainsPoint()
私は一般的にCore Graphicsに慣れていないので、ここで正しく設定していないプロパティがあるかもしれないと思っていますが、それが何であるかを理解するのに苦労しています.
コードは次のとおりです。
TouchableLayer.m
@interface TouchableLayer ()
{
CAShapeLayer *_slider; // The interactive slider that gets moved around the circle.
}
-(id) initWithPosition:(NSInteger) position // Designated initializer for this layer.
{
if ( self = [super init] )
{
_slider = [CAShapeLayer layer];
_slider.fillColor = [UIColor blackColor].CGColor;
[self addSublayer:_slider];
}
return self;
}
-(void) setFrame:(CGRect)frame
{
[super setFrame:frame];
_slider.frame = frame;
// This path is currently hardcoded to be in the right starting spot according to
// other UI elements, but the magic numbers will go away once I figure out this
// rotation issue.
_slider.path = [UIBezierPath bezierPathWithRect:CGRectMake(self.bounds.size.width-47, self.bounds.size.height/2-5, 30.0f, 10.0f)].CGPath;
}
// Checks if the given touch location was on the slider. Returns YES if it was and NO if it was not.
-(BOOL) checkSliderTouchAtPoint: (CGPoint) point
{
if (CGPathContainsPoint(_slider.path , NULL, point, NO))
{
return YES;
}
else
{
return NO;
}
}
// Purpose: Takes the given touch location, determines the angle (in radians) that it forms with respect the center of the screen,
// and returns that angle on the interval [0-2pi] radians. [0-2pi] radians follows a positive counterclockwise path.
-(double) angleForTouchPoint:(CGPoint) point
{
// We use the positive counterclockwise coordinate system in the drawing code since that's what's used traditionally
// outside of Apple's APIs, so multiplying the result of
// atan2() by -1 converts the angle from a positive clockwise unit circle to a positive counterclockwise
// unit circle.
double angleInRadians = -1*atan2(point.y - (self.frame.size.height/2), point.x - self.frame.size.width/2);
if (angleInRadians < 0) // Convert angle to 0 - 2pi radians; we want non-negative angles.
{
angleInRadians += M_PI*2;
}
return angleInRadians;
}
// points get fed into this from the UIView.
-(void) updateWithTouchAtPoint:(CGPoint) point
{
if ([self checkSliderTouchAtPoint:point])
{
double touchAngle = [self angleForTouchPoint:point];
_slider.transform = CATransform3DMakeRotation(-M_PI, 0.0, 0.0, 1.0); // Hardcoded angle rotation for now since I need to do some subtraction later in order to determine the amount to rotate based on touches.
}
}
あなたが提供できるどんな助けにも本当に感謝しています!