How to make a UIImageView draggable? - uiimageview

I am am a beginner iOS developer and I am trying to make an app that involves the user moving an image around the screen (dragging an image, really). Could someone help me with this? I would also like for the user not to be able to drag the image off the screen. Thanks!
I have tried the following code in a subclass of UIImageView:
- (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event {
CGPoint pt = [[touches anyObject] locationInView:self];
startLocation = pt;
[[self superview] bringSubviewToFront:self];
}
- (void) touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event {
CGPoint pt = [[touches anyObject] locationInView:self];
CGRect frame = [self frame];
frame.origin.x += pt.x - startLocation.x;
frame.origin.y += pt.y - startLocation.y;
[self setFrame: frame];
}
It's showing an error in the three lines that use start location ("Use of undeclared identifier 'startLocation'"). Could someone help me fix this error?

Got it I just had to declare it before the methods.

Related

Best practice for resize window with animation using ToolBar on Cocoa

I'm wondering what's the best practice to resize a window when Toolbar changes.
I'm trying to get this effect (animated) when a Toolbar selected option changes.
Any ideas?
Thank you for your help! :)
Here's my commonly used method:
After clicking the new toolbar item, firstly get the frame size of the new subview to be added, then change window's frame with animation.
Demo (just change height, but you can add support to change width):
- (void)switchToTabView:(NSView *)settingView withAnimation:(BOOL)animation
{
NSView *windowView = self.window.contentView;
for (NSView *view in windowView.subviews) {
[view removeFromSuperview];
}
CGFloat oldHeight = windowView.frame.size.height;
[windowView addSubview:settingView];
CGFloat newHeight = settingView.frame.size.height;
CGFloat delta = newHeight - oldHeight;
NSPoint origin = settingView.frame.origin;
origin.y -= delta;
[settingView setFrameOrigin:origin];
NSRect frame = self.window.frame;
frame.size.height += delta;
frame.origin.y -= delta;
[self.window setFrame:frame display:YES animate:animation];
}
#GoKu Your answer gave me a hint how to solve it. I just added a new property for my window called "win".
Here's my solution:
- (void)updateView:(int)tag{
[[_ourViewController view] removeFromSuperview];
if (tag==0) {
self.ourViewController = [[UserView alloc] initWithNibName:#"UserView" bundle:nil];
} else if (tag==1){
self.ourViewController = [[ComputerView alloc] initWithNibName:#"ComputerView" bundle:nil];
}
NSView *newView = _ourViewController.view;
NSRect windowRect = _win.frame;
NSRect currentViewRect = newView.frame;
windowRect.origin.y = windowRect.origin.y + (windowRect.size.height - currentViewRect.size.height);
windowRect.size.height = currentViewRect.size.height;
windowRect.size.width = currentViewRect.size.width;
[self.win setContentView:newView];
[self.win setFrame:windowRect display:YES animate:YES];
}
Thanx!

Whats the correct way to calculate point in view that mouse was clicked

I have a custom subclass of NSView in my app.
I would like to know the exact point in the view, relative to it's origin, that was clicked with the mouse. (i.e. Not relative to the Window origin, but relative to the custom-view origin).
I have always used this, which has worked perfectly:
-(void)mouseDown:(NSEvent *)theEvent
{
NSPoint screenPoint = [NSEvent mouseLocation];
NSPoint windowPoint = [[self window] convertScreenToBase:screenPoint];
NSPoint point = [self convertPoint:windowPoint fromView:nil];
_pointInView = point;
[self setNeedsDisplay:YES];
}
But now I get a warning that convertScreenToBase is deprecated and to use convertRectFromScreen instead. However I cannot get the same results from convertRectFromScreen, and anyway, I'm interested in a point, not a rect!
What should I use as the correct replacement for the deprecated code above?
Thanks in advance!
This line from your code:
NSPoint screenPoint = [NSEvent mouseLocation];
gets the location of the mouse cursor out of sync with the event stream. It's not the position of the event you're currently handling, which was a short time in the past; it's the position of the cursor right now, which means you're potentially skipping past some important stuff. You should almost always use the position in sync with the event stream.
To do that, use the theEvent parameter that your method receives. NSEvent has a locationInWindow property, which has already been translated to the coordinates of the window which receives it. That eliminates the need for you to convert it.
NSPoint windowPoint = [theEvent locationInWindow];
Your code to convert the window location to the view's coordinate system is fine.
I found the solution:
NSPoint screenPoint = [NSEvent mouseLocation];
NSRect screenRect = CGRectMake(screenPoint.x, screenPoint.y, 1.0, 1.0);
NSRect baseRect = [self.window convertRectFromScreen:screenRect];
_pointInView = [self convertPoint:baseRect.origin fromView:nil];
I have made a sample project with a window and tested the 'old' and new scenario. The result is the same in both cases.
You have to make one additional step: Create a simple rect with the screenPoint as origin. Then use the origin of the new, returned rect.
Here is the new code:
-(void)mouseDown:(NSEvent *)theEvent
{
NSPoint screenPoint = [NSEvent mouseLocation];
NSRect rect = [[self window] convertRectFromScreen:NSMakeRect(screenPoint.x, screenPoint.y, 0, 0)];
NSPoint windowPoint = rect.origin;
NSPoint point = [self convertPoint:windowPoint fromView:nil];
_pointInView = point;
[self setNeedsDisplay:YES];
}
I hope I was able to help you!
Simply use convert(_:from:) can be inaccurate, this can happen when event's window and view's window are not the same. Please check my answer in another question for a more robust way.
https://stackoverflow.com/a/69784415/3164091

cocoa: how to render view to image?

I want to know is there any method to render a view to image? just like a screenshot, but I can specify any view to that method. I know how to do it in ios. Saving view content, but how can I do it in mac os ?
There are several ways, but non of them works perfect.
Many problems are connected with Layer Backed views.
if you don't have layer backing or hosting views you can use this code:
NSData* data = [mainView dataWithPDFInsideRect:[mainView bounds]];
NSImage *img = [[NSImage alloc] initWithData:data];
if you work with layer based views:
till 10.8 the best way for me was
NSSize mySize = mapImage.bounds.size;
NSSize imgSize = NSMakeSize( mySize.width, mySize.height );
NSBitmapImageRep *bir = [mapImage bitmapImageRepForCachingDisplayInRect:[mapImage bounds]];
[bir setSize:imgSize];
[mapImage cacheDisplayInRect:[mapImage bounds] toBitmapImageRep:bir];
caheImg = [[NSImage alloc]initWithSize:imgSize];
[caheImg addRepresentation:bir];
but in 10.8 bitmapImageRepForCachingDisplayInRect stopped working with Layer Backed views.
there is an option to make a screenshot of your screen and cut out your view:
+ (NSImage*) screenCacheImageForView:(NSView*)aView
{
NSRect originRect = [aView convertRect:[aView bounds] toView:[[aView window] contentView]];
NSRect rect = originRect;
rect.origin.y = 0;
rect.origin.x += [aView window].frame.origin.x;
rect.origin.y += [[aView window] screen].frame.size.height - [aView window].frame.origin.y - [aView window].frame.size.height;
rect.origin.y += [aView window].frame.size.height - originRect.origin.y - originRect.size.height;
CGImageRef cgimg = CGWindowListCreateImage(rect,
kCGWindowListOptionIncludingWindow,
(CGWindowID)[[aView window] windowNumber],
kCGWindowImageDefault);
return [[NSImage alloc] initWithCGImage:cgimg size:[aView bounds].size];
}
The answer from #Remizorr works in ObjectiveC like explained even under
macOS High Sierra 10.13.4. - Xcode 9.2.
It also works for layerBacked view (wantsLayer = true).
Here is the updated Swift version :
extension NSView {
func snapshotImage() -> NSImage? {
guard let window = window,
let screen = window.screen,
let contentView = window.contentView else { return nil }
let originRect = self.convert(self.bounds, to:contentView)
var rect = originRect
rect.origin.x += window.frame.origin.x
rect.origin.y = 0
rect.origin.y += screen.frame.size.height - window.frame.origin.y - window.frame.size.height
rect.origin.y += window.frame.size.height - originRect.origin.y - originRect.size.height
guard window.windowNumber > 0 else { return nil }
guard let cgImage = CGWindowListCreateImage(rect, .optionIncludingWindow, CGWindowID(window.windowNumber), CGWindowImageOption.bestResolution) else { return nil }
return NSImage(cgImage: cgImage, size: self.bounds.size)
}
}
NOTE: This works even for a WKWebView and it does take a snapshot of a WKWebView video playing (which WKWebViews takeSnapshot does not) ;).
I'm using this code in my app, which works great.
However, if I drag the app to a secondary monitor the screen capture is thrown out and I get the wrong rect captured.
The following code fixes that issue (I've also removed some redundant maths from the calculation where a field was being subtracted and then added) in case anyone comes across this in the future:
NSRect originRect = [aView convertRect:[aView bounds] toView:[[aView window] contentView]];
NSArray *screens = [NSScreen screens];
NSScreen *primaryScreen = [screens objectAtIndex:0];
NSRect rect = originRect;
rect.origin.y = 0;
rect.origin.x += [aView window].frame.origin.x;
rect.origin.y = primaryScreen.frame.size.height - [aView window].frame.origin.y - originRect.origin.y - originRect.size.height;

How to Animate scrollpoint?

- (void)mouseDragged:(NSEvent *)theEvent {
NSSize dynamicImageSize;
dynamicImageSize = [[self image] size];
NSSize contentSize = [(NSScrollView*)[[self superview] superview] contentSize];
if(dynamicImageSize.height > contentSize.height || dynamicImageSize.width > contentSize.width)
{
float x = startOrigin.x - ([theEvent locationInWindow].x - startPt.x);
float y = startOrigin.y - ([theEvent locationInWindow].y - startPt.y);
[self scrollPoint:NSMakePoint(x, y)];
}
}
In the above code I need to animate the scrolling. How can I achieve this?
Thanks.
You can create a subclass of NSAnimation to do this. I've created one as part of an open source project of mine (with public domain license).
You can find it here: https://github.com/abhibeckert/Dux/blob/master/Dux/DuxScrollViewAnimation.m (note: this project has ARC enabled. If you're not using ARC you will need to update as appropriate).
Example:
[DuxScrollViewAnimation animatedScrollToPoint:NSMakePoint(x,y) inScrollView:self.enclosingScrollView];
In my app, I set the clipView's boundsOrigin using its animator:
[NSAnimationContext beginGrouping];
NSClipView* clipView = [[myView enclosingScrollView] contentView];
NSPoint newOrigin = [clipView bounds].origin;
newOrigin.x = my_new_origin.x;
[[clipView animator] setBoundsOrigin:newOrigin];
[NSAnimationContext endGrouping];
I'm not sure if this is a supported animation type, but have you tried calling through the animator proxy object?
eg. [[self animator] scrollPoint:NSMakePoint(x, y)];

Widget "flip" behavior in Core Animation/Cocoa

I'm trying to make a Card class that duplicates the behavior of Dashboard widgets in that you can put controls or images or whatever on two sides of the card and flip between them.
Layer backed views have a transform property, but altering that doesn't do what I would expect it to do (rotating the layer around the y axis folds it off to the left side).
I was pointed to some undocumented features and an .h file named cgsprivate.h, but I'm wondering if there is an official way to do this? This software would have to be shipped and I'd hate to see it fail later because the Apple guys pull it in 10.6.
Anyone have any idea how to do this? It's so weird to me that a simple widget thing would be so hard to do in Core Animation.
Thanks in advance!
EDIT: I can accomplish this behavior with images that are on layers, but I don't know how to get more advanced controls/views/whatever on the layers. The card example uses images.
Mike Lee has an implementation of the flip effect for which he has released some sample code. (Unfortunately, this is no longer available online, but Drew McCormack built off of that in his own implementation.) It appears that he grabs the layers for the "background" and "foreground" views to be swapped, uses a CATransform3D to rotate the two views in the animation, and then swaps the views once the animation has completed.
By using the layers from the views, you avoid needing to cache into a bitmap, since that's what the layers are doing anyways. In any case, his view controller looks to be a good drop-in solution for what you want.
Using Core Animation like e.James outlined...Note, this is using garbage collection and a hosted layer:
#import "AnimationWindows.h"
#interface AnimationFlipWindow (PrivateMethods)
NSRect RectToScreen(NSRect aRect, NSView *aView);
NSRect RectFromScreen(NSRect aRect, NSView *aView);
NSRect RectFromViewToView(NSRect aRect, NSView *fromView, NSView *toView);
#end
#pragma mark -
#implementation AnimationFlipWindow
#synthesize flipForward = _flipForward;
- (id) init {
if ( self = [super init] ) {
_flipForward = YES;
}
return self;
}
- (void) finalize {
// Hint to GC for cleanup
[[NSGarbageCollector defaultCollector] collectIfNeeded];
[super finalize];
}
- (void) flip:(NSWindow *)activeWindow
toBack:(NSWindow *)targetWindow {
CGFloat duration = 1.0f * (activeWindow.currentEvent.modifierFlags & NSShiftKeyMask ? 10.0 : 1.0);
CGFloat zDistance = 1500.0f;
NSView *activeView = [activeWindow.contentView superview];
NSView *targetView = [targetWindow.contentView superview];
// Create an animation window
CGFloat maxWidth = MAX(NSWidth(activeWindow.frame), NSWidth(targetWindow.frame)) + 500;
CGFloat maxHeight = MAX(NSHeight(activeWindow.frame), NSHeight(targetWindow.frame)) + 500;
CGRect animationFrame = CGRectMake(NSMidX(activeWindow.frame) - (maxWidth / 2),
NSMidY(activeWindow.frame) - (maxHeight / 2),
maxWidth,
maxHeight);
mAnimationWindow = [NSWindow initForAnimation:NSRectFromCGRect(animationFrame)];
// Add a touch of perspective
CATransform3D transform = CATransform3DIdentity;
transform.m34 = -1.0 / zDistance;
[mAnimationWindow.contentView layer].sublayerTransform = transform;
// Relocate target window near active window
CGRect targetFrame = CGRectMake(NSMidX(activeWindow.frame) - (NSWidth(targetWindow.frame) / 2 ),
NSMaxY(activeWindow.frame) - NSHeight(targetWindow.frame),
NSWidth(targetWindow.frame),
NSHeight(targetWindow.frame));
[targetWindow setFrame:NSRectFromCGRect(targetFrame) display:NO];
mTargetWindow = targetWindow;
// New Active/Target Layers
[CATransaction begin];
CALayer *activeWindowLayer = [activeView layerFromWindow];
CALayer *targetWindowLayer = [targetView layerFromWindow];
[CATransaction commit];
activeWindowLayer.frame = NSRectToCGRect(RectFromViewToView(activeView.frame, activeView, [mAnimationWindow contentView]));
targetWindowLayer.frame = NSRectToCGRect(RectFromViewToView(targetView.frame, targetView, [mAnimationWindow contentView]));
[CATransaction begin];
[[mAnimationWindow.contentView layer] addSublayer:activeWindowLayer];
[CATransaction commit];
[mAnimationWindow orderFront:nil];
[CATransaction begin];
[[mAnimationWindow.contentView layer] addSublayer:targetWindowLayer];
[CATransaction commit];
// Animate our new layers
[CATransaction begin];
CAAnimation *activeAnim = [CAAnimation animationWithDuration:(duration * 0.5) flip:YES forward:_flipForward];
CAAnimation *targetAnim = [CAAnimation animationWithDuration:(duration * 0.5) flip:NO forward:_flipForward];
[CATransaction commit];
targetAnim.delegate = self;
[activeWindow orderOut:nil];
[CATransaction begin];
[activeWindowLayer addAnimation:activeAnim forKey:#"flip"];
[targetWindowLayer addAnimation:targetAnim forKey:#"flip"];
[CATransaction commit];
}
- (void) animationDidStop:(CAAnimation *)animation finished:(BOOL)flag {
if (flag) {
[mTargetWindow makeKeyAndOrderFront:nil];
[mAnimationWindow orderOut:nil];
mTargetWindow = nil;
mAnimationWindow = nil;
}
}
#pragma mark PrivateMethods:
NSRect RectToScreen(NSRect aRect, NSView *aView) {
aRect = [aView convertRect:aRect toView:nil];
aRect.origin = [aView.window convertBaseToScreen:aRect.origin];
return aRect;
}
NSRect RectFromScreen(NSRect aRect, NSView *aView) {
aRect.origin = [aView.window convertScreenToBase:aRect.origin];
aRect = [aView convertRect:aRect fromView:nil];
return aRect;
}
NSRect RectFromViewToView(NSRect aRect, NSView *fromView, NSView *toView) {
aRect = RectToScreen(aRect, fromView);
aRect = RectFromScreen(aRect, toView);
return aRect;
}
#end
#pragma mark -
#pragma mark CategoryMethods:
#implementation CAAnimation (AnimationFlipWindow)
+ (CAAnimation *) animationWithDuration:(CGFloat)time flip:(BOOL)bFlip forward:(BOOL)forwardFlip{
CABasicAnimation *flipAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
CGFloat startValue, endValue;
if ( forwardFlip ) {
startValue = bFlip ? 0.0f : -M_PI;
endValue = bFlip ? M_PI : 0.0f;
} else {
startValue = bFlip ? 0.0f : M_PI;
endValue = bFlip ? -M_PI : 0.0f;
}
flipAnimation.fromValue = [NSNumber numberWithDouble:startValue];
flipAnimation.toValue = [NSNumber numberWithDouble:endValue];
CABasicAnimation *shrinkAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
shrinkAnimation.toValue = [NSNumber numberWithFloat:1.3f];
shrinkAnimation.duration = time * 0.5;
shrinkAnimation.autoreverses = YES;
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = [NSArray arrayWithObjects:flipAnimation, shrinkAnimation, nil];
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animationGroup.duration = time;
animationGroup.fillMode = kCAFillModeForwards;
animationGroup.removedOnCompletion = NO;
return animationGroup;
}
#end
#pragma mark -
#implementation NSWindow (AnimationFlipWindow)
+ (NSWindow *) initForAnimation:(NSRect)aFrame {
NSWindow *window = [[NSWindow alloc] initWithContentRect:aFrame
styleMask:NSBorderlessWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setOpaque:NO];
[window setHasShadow:NO];
[window setBackgroundColor:[NSColor clearColor]];
[window.contentView setWantsLayer:YES];
return window;
}
#end
#pragma mark -
#implementation NSView (AnimationFlipWindow)
- (CALayer *) layerFromWindow {
NSBitmapImageRep *image = [self bitmapImageRepForCachingDisplayInRect:self.bounds];
[self cacheDisplayInRect:self.bounds toBitmapImageRep:image];
CALayer *layer = [CALayer layer];
layer.contents = (id)image.CGImage;
layer.doubleSided = NO;
// Shadow settings based upon Mac OS X 10.6
[layer setShadowOpacity:0.5f];
[layer setShadowOffset:CGSizeMake(0,-10)];
[layer setShadowRadius:15.0f];
return layer;
}
#end
The header file:
#interface AnimationFlipWindow : NSObject {
BOOL _flipForward;
NSWindow *mAnimationWindow;
NSWindow *mTargetWindow;
}
// Direction of flip animation (property)
#property (readwrite, getter=isFlipForward) BOOL flipForward;
- (void) flip:(NSWindow *)activeWindow
toBack:(NSWindow *)targetWindow;
#end
#pragma mark -
#pragma mark CategoryMethods:
#interface CAAnimation (AnimationFlipWindow)
+ (CAAnimation *) animationWithDuration:(CGFloat)time
flip:(BOOL)bFlip // Flip for each side
forward:(BOOL)forwardFlip; // Direction of flip
#end
#interface NSWindow (AnimationFlipWindow)
+ (NSWindow *) initForAnimation:(NSRect)aFrame;
#end
#interface NSView (AnimationFlipWindow)
- (CALayer *) layerFromWindow;
#end
EDIT: This will animate to flip from one window to another window. You can apply the same principals to a view.
It's overkill for your purposes (as it contains a largely-complete board and card game reference app), but check out this sample from ADC. The card games included with it do that flip effect quite nicely.
If you are able to do this with images, perhaps you can keep all of your controls in an NSView object (as usual), and then render the NSView into a bitmap image using cacheDisplayInRect:toBitmapImageRep: just prior to executing the flip effect. The steps would be:
Render the NSView to a bitmap
Display that bitmap in a layer suitable for the flip effect
Hide the NSView and expose the image layer
Perform the flip effect
I know this is late but Apple has an example project here that may be of help to anyone still stumbling upon this question.
https://developer.apple.com/library/mac/#samplecode/ImageTransition/Introduction/Intro.html#//apple_ref/doc/uid/DTS40010277
There's a complete open source implementation of this by the guys at Mizage.
You can check it out here: https://github.com/mizage/Flip-Animation
Probably not the case in 2008 when this question was asked, but this is pretty easy these days:
[UIView animateWithDuration:0.5 animations:^{
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.iconView cache:YES];
/* changes to the view made here will be reflected on the flipped to side */
}];
Note: Apparently, this only works on iOS.

Resources