I am using third party Color picker wheel (ISColorWheel- https://github.com/justinmeiners/ios-color-wheel) to pick a color and display it on screen. I need to restrict selecting blue color if particular button is enabled.
When i see the color picker library class, they have implemented following code to restrict the Knob view to move around the color picker.
- (void)setTouchPoint:(CGPoint)point
{
CGFloat width = self.bounds.size.width;
CGFloat height = self.bounds.size.height;
CGPoint center = CGPointMake(width / 2.0, height / 2.0);
// Check if the touch is outside the wheel
if (ISColorWheel_PointDistance(center, point) < _radius)
{
//NSLog(#"Distance is %f and Radius is %f",ISColorWheel_PointDistance(center, point),_radius);
_touchPoint = point;
}
else
{
// If so we need to create a drection vector and calculate the constrained point
CGPoint vec = CGPointMake(point.x - center.x, point.y - center.y);
float extents = sqrtf((vec.x * vec.x) + (vec.y * vec.y));
vec.x /= extents;
vec.y /= extents;
_touchPoint = CGPointMake(center.x + vec.x * _radius, center.y + vec.y * _radius);
NSLog(#"Touch Point is %f %f",_touchPoint.x,_touchPoint.y);
}
[self updateKnob];
}
The above code restrict the user to move knobView away from the circle. In my case i need to restrict the user not to select Blue color of ColorPicker. How can i implement it. How to find the trajectory of Blue color.
You should define a triangle that defines the color blue as you see it (How much green dose it contain in one side how much purple on the other) then look for you Point inside that triangle. One way to do it is here: https://stackoverflow.com/a/9755252/1870192
Related
I'm making a photo hunt style app. I've got a number of X-Rays and I need to set specific areas of the uiimage to process touch events as correct and others as incorrect.
I understand that I can use the code below to get the tap location in the image view but how do I declare an area on the image view as correct and compare it to the tap location value?
CGPoint tapLocation = [gesture locationInView:self.imagePlateA];
Any help much appreciated!
So you have to programmatically create "regions" and test to see whether or not they're in that region after you get that point. For example:
//Get the tap location
CGPoint tapLocation = [gesture locationInView:self.imagePlateA];
if ([self checkIfTap:tapLocation inRegionWithCenter:CGPointMake(someX, someY) radius:radius]) {
//YAY WE'RE WITHIN THE BOUNDS OF A CIRCLE AT POINT (someX, someY)
//THAT HAS A RADIUS OF radius
}
and the method of checkIfTap: inRegionWithCenter: radius: can be defined like this:
- (BOOL)checkIfTap:(CGPoint)tapLocation inRegionWithCenter:(CGPoint)center radius:(CGFloat)radius {
CGFloat dx = tapLocation.x - center.x;
CGFloat dy = tapLocation.y - center.y;
//Pythagorean theorem
if (sqrt(dx * dx + dy * dy) < radius) {
return YES;
} else {
return NO;
}
}
If the correct locations of the image is a CGRect rather than points, you could use CGRectContainsPoint()
CGGeometry Reference
I want to move a UIView inside of a circle. The UIView moves every point inside the circle but not touch border line of the circle. I am calculating distance between circle and the UIView.
var distance = sqrt(
pow((touchPoint.x - selfCenter.x), 2) + pow((touchPoint.y - selfCenter.y), 2)
)
And limiting the UIView movement towards out of the circle
if distance <= radius {
theUIView.center = touchPoint
}
The problem starts here, if touch move out from circle the UIView stuck at the border, inside the circle. That is why I am trying write else statement as far as I have tried this.
if distance <= radius {
theUIView.center = touchPoint
} else {
theUIView.center = CGPointMake(
touchPoint.x / distance * radius,
touchPoint.y / distance * radius
)
}
Question is, how I can keep the UIView inside the circle and keep moving if touches keep moving. A hint would be great.
There are similar questions here -like this- but did not helped.
Your else case looks wrong. If you want to "project" a point outside of the circle
onto the circle boundary then it should be
if distance <= radius {
theUIView.center = touchPoint
} else {
theUIView.center = CGPointMake(
selfCenter.x + (touchPoint.x - selfCenter.x) / distance * radius,
selfCenter.y + (touchPoint.y - selfCenter.y) / distance * radius
)
}
Remark: The distance can be more easily computed using the hypot() function:
var distance = hypot(touchPoint.x - selfCenter.x, touchPoint.y - selfCenter.y)
I am trying to bring out dock like magnification effect for my iPad app thru iCarousel library. With that i am able to zoom in the center item of the carousel with the following piece of code, but trying to zoom the adjacent items of the centre item with zoom level little less than the centre item.
- (CATransform3D)carousel:(iCarousel *)_carousel itemTransformForOffset:
:(CGFloat)offset baseTransform:(CATransform3D)transform
{
CGFloat MAX_SCALE = 1.95f; //max scale of center item
CGFloat MAX_SHIFT = 40.0f; //amount to shift items to keep spacing the same
CGFloat shift = fminf(1.0f, fmaxf(-1.0f, offset));
CGFloat scale = 1.0f + (1.0f - fabs(shift)) * (MAX_SCALE - 1.0f);
transform = CATransform3DTranslate(transform,
offset * _carousel.itemWidth * 1.08f + shift * MAX_SHIFT, 0.0f, 0.0f);
return CATransform3DScale(transform, scale, scale, scale);
}
Looking forward for any kind of help. thanks.
This function could be your answer:
its graph (for scaleMax = 3, xFactor = 1):
This function is used directly for calculating the scale factor from the carousel offset. In addition you need to shift the elements to left and right, so that don't overlap (as you already did). This can be done either by shifting the items by the function's integral, which works, but the gap in the center is huge this way. Or it can be calculated manually by taking a sum of all scaled items. The gap can stay constant, or it can be scaled separately.
Notice that the scale is equal to 1 in the center and descends to 1/scale_max by the edges. This is because scaling down doesn't create undesirable pixelated effects. Make your item view as you want it to appear in the center and the views on the edges will get scaled down.
This could be the usage:
-(CGFloat) scaleForX:(CGFloat)x xFactor:(CGFloat)xFactor centerScale:(CGFloat)centerScale
{
return (1+1/(sqrtf(x*x*x*x*xFactor*xFactor*xFactor*xFactor+1))*(centerScale-1.0))/centerScale;
}
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
//items in the center are scaled by this factor
const CGFloat centerScale = 4.0f;
//the larger the xFactor, the smaller the magnified area
const CGFloat xFactor = 1.5f;
//should the gap also be scaled? or keep it constant.
const BOOL scaleGap = NO;
const CGFloat spacing = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:1.025];
const CGFloat gap = scaleGap?0.0:spacing-1.0;
//counting x offset to keep a constant gap
CGFloat scaleOffset = 0.0;
float x = fabs(offset);
for(;x >= 0.0; x-=1.0)
{
scaleOffset+=[self scaleForX:x xFactor:xFactor centerScale:centerScale];
scaleOffset+= ((x>=1.0)?gap:x*gap);
}
scaleOffset -= [self scaleForX:offset xFactor:xFactor centerScale:centerScale]/2.0;
scaleOffset += (x+0.5)*[self scaleForX:(x+(x>-0.5?0.0:1.0)) xFactor:xFactor centerScale:centerScale];
scaleOffset *= offset<0.0?-1.0:1.0;
scaleOffset *= scaleGap?spacing:1.0;
CGFloat scale = [self scaleForX:offset xFactor:xFactor centerScale:centerScale];
transform = CATransform3DTranslate(transform, scaleOffset*carousel.itemWidth, 0.0, 0.0);
transform = CATransform3DScale(transform, scale, scale, 1.0);
return transform;
}
with result:
You can try to alter constants for different behaviors. Also changing the exponent to another even number can further widen the peak and sharpen the descent to the minimum scale.
You need to watch episode 219 from WWDC 2012 - Advanced Collection Views and Building Custom Layouts. I know it relates to collection views, but I'm sure you'll find a way to adapt that code :)
In this wheel we have 6 pieces. The top of the wheel is the specific point. The specific point gives information of pieces. Now it gives information of the blue piece. So if i click on one of the piece for example purple, i need that purple piece to goes to the specific point and automatically go into the given information about the purple piece.
CGFloat topPositionAngle = radiansToDegrees(atan2(view.transform.a, view.transform.b));
-180 - pink
-120 - blue
-60 - orange
0 - purple
60 - yellow
120 - green
Now the topPositionAngle shows -120 = blue, when purple comes to the specific point it shows 0.
UITouch *touch = [touches anyObject];
CGPoint currentTouchPoint = [touch locationInView:view];
CGFloat currentAngle = radiansToDegrees(atan2(currentTouchPoint.x, currentTouchPoint.y));
CGFloat angleTransform = ???
CGAffineTransform current = view.transform;
[UIView animateWithDuration:0.2f animations:^{
[view setTransform:CGAffineTransformRotate(current, angleTransform)];
}];
How can we get the automatically rotation to the specific point? Just like Dansk Bank app (see the following youtube link) something similar to the video from 0:21 - 0:25 min.
http://www.youtube.com/watch?v=hulBh_KNGjE
float fromAngle = atan2(m_locationBegan.y-img.center.y, m_locationBegan.x-img.center.x);
float toAngle = atan2(_location.y-imgDigits.center.y, _location.x-img.center.x);
float newAngle = wrapd(m_currentAngle + (toAngle - fromAngle), 0, 2*3.14);
angle = newAngle;
CGAffineTransform transform = CGAffineTransformMakeRotation(newAngle);
img.transform = transform;
Use something like this. Hope this helps
Here u should know touch point and your specific point
You Need to Know touched Point Angle:
CGFloat touchedPointAngle = atan2f(touchPoint.y - centerSuper.y, touchPoint.x - centerSuper.x) + M_PI;
if ((touchedPointAngle < sliceInRadians) && (touchedPointAngle > 0)) {
angleTransform = sliceInRadians;
} else if ...
Then you can transform.
I've successfully implemented the custom map annotation callout code from the asynchrony blog post .
(When user taps a map pin, I show a customized image instead of the standard callout view).
The only remaining problem is that the callout occupies the entire width of the view, and the app would look much better if the width corresponded to the image I'm using.
I have subclassed MKAnnotationView, and when I set it's contentWidth to the width of the image, the triangle does not always point back to the pin, or the image is not even inside it's wrapper view.
Any help or suggestions would be great.
Thanks.
I ran into a similar problem when implementing the CalloutMapAnnotationView for the iPad. Basically I didn't want the iPad version to take the full width of the mapView.
In the prepareFrameSize method set your width:
- (void)prepareFrameSize {
// ...
// changing frame x/y origins here does nothing
frame.size = CGSizeMake(320.0f, height);
self.frame = frame;
}
Next you'll have to calculate the xOffset based off the parentAnnotationView:
- (void)prepareOffset {
// Base x calculations from center of parent view
CGPoint parentOrigin = [self.mapView convertPoint:self.parentAnnotationView.center
fromView:self.parentAnnotationView.superview];
CGFloat xOffset = 0;
CGFloat mapWidth = self.mapView.bounds.size.width;
CGFloat halfWidth = mapWidth / 2;
CGFloat x = parentOrigin.x + (320.0f / 2);
if( parentOrigin.x < halfWidth && x < 0 ) // left half of map
xOffset = -x;
else if( parentOrigin.x > halfWidth && x > mapWidth ) // right half of map
xOffset = -( x - mapWidth);
// yOffset calculation ...
}
Now in drawRect:(CGRect)rect before the callout bubble is drawn:
- (void)drawRect:(CGRect)rect {
// ...
// Calculate the carat lcation in the frame
if( self.centerOffset.x == 0.0f )
parentX = 320.0f / 2;
else if( self.centerOffset.x < 0.0f )
parentX = (320.0f / 2) + -self.centerOffset.x;
//...
}
Hope this helps put you on the right track.