Device, Method, and Graphical User Interface for Manipulating a User Interface Object

• US 20100171712A1
• Filed: 09/25/2009
• Published: 07/08/2010
• Est. Priority Date: 01/05/2009
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Bernstein, Jeffrey Traer, Victor, B. Michael, Cieplinski, Avi E., Cherna, Timothy David
• Granted Patent: US 8,957,865 B2
• Time in Patent Office: Days
• US Class Current: 345/173
• CPC Class Codes: G06F 2203/04808 Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: G06T 11/60 Editing figures and text; Combining figures or text

Abstract

In some embodiments, an electronic device with a display and a touch-sensitive surface displays a user interface object. The device detects a first contact and a second contact concurrently on the touch-sensitive surface. The device determines which contact of the first contact and the second contact is a topmost contact, a bottommost contact, a leftmost contact, and a rightmost contact on the touch-sensitive surface. While continuing to detect the first contact and the second contact, the device detects movement of the first contact across the touch-sensitive surface, and concurrently moves two edges of the user interface object that correspond to the first contact in accordance with the detected movement of the first contact, including horizontally moving one of the two edges and vertically moving the other of the two edges.

Claims

1. A method, comprising:

at a computing device with a display and a touch-sensitive surface;

simultaneously displaying on the display;

a digital image; and

a cropping mask rectangle for the digital image, wherein the cropping mask rectangle has four edges comprising a top edge, a bottom edge, a left edge, and a right edge;

detecting a first contact and a second contact concurrently on the touch-sensitive surface;

determining which contact of the first contact and the second contact is a topmost contact on the touch-sensitive surface;

determining which contact of the first contact and the second contact is a bottommost contact on the touch-sensitive surface;

determining which contact of the first contact and the second contact is a leftmost contact on the touch-sensitive surface;

determining which contact of the first contact and the second contact is a rightmost contact on the touch-sensitive surface; and

,

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detecting movement of the first contact across the touch-sensitive surface; and

concurrently moving on the display two edges of the cropping mask rectangle that correspond to the first contact in accordance with the detected movement of the first contact, including horizontally moving one of the two edges and vertically moving the other of the two edges.

2. The method of claim 1, including:

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detecting movement of both the first contact and the second contact across the touch-sensitive surface;

vertically moving the top edge of the cropping mask rectangle in accordance with vertical movement of the topmost contact on the touch-sensitive surface;

vertically moving the bottom edge of the cropping mask rectangle in accordance with vertical movement of the bottommost contact on the touch-sensitive surface;

horizontally moving the left edge of the cropping mask rectangle in accordance with horizontal movement of the leftmost contact on the touch-sensitive surface; and

horizontally moving the right edge of the cropping mask rectangle in accordance with horizontal movement of the rightmost contact on the touch-sensitive surface.

3. The method of claim 1, including

in response to detecting concurrent movement of the first contact and the second contact, concurrently moving at least two of the edges, including at least one edge corresponding to the first contact and at least one edge corresponding to the second contact.

4. The method of claim 1, further comprising suppressing jitter associated with the first contact and the second contact.

5. The method of claim 1, wherein the touch-sensitive surface is separate from the display.

6. The method of claim 1, wherein the touch-sensitive surface is a touch pad.

7. The method of claim 1, wherein the touch-sensitive surface is on the display.

8. The method of claim 1, wherein the digital image and the cropping mask rectangle are simultaneously displayed in an image editing application, a drawing application, a presentation application, a word processing application, a website creation application, a disk authoring application, or a spreadsheet application.

9. The method of claim 1, including:

providing a visual indicator that the cropping mask rectangle can be manipulated.

10. The method of claim 1, wherein the first contact and the second contact are displaced from the edges of the cropping mask rectangle.

11. The method of claim 1, wherein the first contact and the second contact are displaced from the cropping mask rectangle.

12. The method of claim 1, including:

determining a position of the first contact on the touch-sensitive surface; and

determining a position of the second contact on the touch-sensitive surface;

13. The method of claim 1, including:

detecting movement of the second contact across the touch-sensitive surface by less than a predefined amount; and

adjusting the cropping mask rectangle while maintaining a corner of the cropping mask rectangle that corresponds to the second contact at a fixed location on the display.

14. The method of claim 1, including:

detecting movement of the first contact across the touch-sensitive surface without detecting movement of the second contact across the touch-sensitive surface; and

,

adjusting the cropping mask rectangle while maintaining a corner of the cropping mask rectangle that corresponds to the second contact at a fixed location on the display.

15. The method of claim 1, wherein moving a respective edge of the cropping mask rectangle in accordance with movement of a respective contact comprises moving the respective edge of the cropping mask rectangle in proportion to a component of movement of the respective contact.

16. The method of claim 1, wherein moving respective edges of the cropping mask rectangle in accordance with movement of respective contacts comprises snapping the cropping mask rectangle edges to a series of predefined mask aspect ratios as the respective contacts move.

17. The method of claim 1, wherein moving respective edges of the cropping mask rectangle in accordance with movement of respective contacts comprises constraining the cropping mask rectangle to a predefined mask aspect ratio as the respective contacts move.

18. The method of claim 1, further comprising:

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detecting a third contact on the touch-sensitive surface; and

continuing to concurrently move on the display two edges of the cropping mask rectangle that correspond to the first contact in accordance with the detected movement of the first contact, including horizontally moving one of the two edges and vertically moving the other of the two edges, without respect to the third detected contact.

19. The method of claim 18, further comprising:

detecting a lift off of the second contact from the touch-sensitive surface;

while continuing to detect the first contact and the third contact on the touch-sensitive surface;

determining which contact of the first contact and the third contact is a topmost contact on the touch-sensitive surface;

determining which contact of the first contact and the third contact is a bottommost contact on the touch-sensitive surface;

determining which contact of the first contact and the third contact is a leftmost contact on the touch-sensitive surface;

determining which contact of the first contact and the third contact is a rightmost contact on the touch-sensitive surface;

detecting movement of the third contact across the touch-sensitive surface; and

concurrently moving on the display two edges of the cropping mask rectangle that correspond to the third contact in accordance with the detected movement of the third contact, including horizontally moving one of the two edges and vertically moving the other of the two edges.

20. The method of claim 1, including:

cropping the digital image with the cropping mask rectangle.

21. A computing device, comprising:

a touch-sensitive surface;

a display;

one or more processors;

memory; and

one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for;

simultaneously displaying on the display;

a digital image; and

a cropping mask rectangle for the digital image, wherein the cropping mask rectangle has four edges comprising a top edge, a bottom edge, a left edge, and a right edge;

detecting a first contact and a second contact concurrently on the touch-sensitive surface;

determining which contact of the first contact and the second contact is a topmost contact on the touch-sensitive surface;

determining which contact of the first contact and the second contact is a bottommost contact on the touch-sensitive surface;

determining which contact of the first contact and the second contact is a leftmost contact on the touch-sensitive surface;

determining which contact of the first contact and the second contact is a rightmost contact on the touch-sensitive surface; and

,

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detecting movement of the first contact across the touch-sensitive surface; and

concurrently moving on the display two edges of the cropping mask rectangle that correspond to the first contact in accordance with the detected movement of the first contact, including horizontally moving one of the two edges and vertically moving the other of the two edges.

22. A computer readable storage medium having stored therein instructions, which when executed by a computing device with a touch-sensitive surface and a display, cause the device to:

simultaneously display on the display;

a digital image; and

a cropping mask rectangle for the digital image, wherein the cropping mask rectangle has four edges comprising a top edge, a bottom edge, a left edge, and a right edge;

detect a first contact and a second contact concurrently on the touch-sensitive surface;

determine which contact of the first contact and the second contact is a topmost contact on the touch-sensitive surface;

determine which contact of the first contact and the second contact is a bottommost contact on the touch-sensitive surface;

determine which contact of the first contact and the second contact is a leftmost contact on the touch-sensitive surface;

determine which contact of the first contact and the second contact is a rightmost contact on the touch-sensitive surface; and

,

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detect movement of the first contact across the touch-sensitive surface; and

concurrently move on the display two edges of the cropping mask rectangle that correspond to the first contact in accordance with the detected movement of the first contact, including horizontally moving one of the two edges and vertically moving the other of the two edges.

23. A graphical user interface on a computing device with a touch-sensitive surface, a display, a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising:

a digital image; and

a cropping mask rectangle for the digital image,

wherein;

the cropping mask rectangle has four edges comprising a top edge, a bottom edge, a left edge, and a right edge;

a first contact and a second contact are detected concurrently on the touch-sensitive surface;

which contact of the first contact and the second contact is a topmost contact on the touch-sensitive surface is determined;

which contact of the first contact and the second contact is a bottommost contact on the touch-sensitive surface is determined;

which contact of the first contact and the second contact is a leftmost contact on the touch-sensitive surface is determined;

which contact of the first contact and the second contact is a rightmost contact on the touch-sensitive surface is determined; and

,

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

movement of the first contact across the touch-sensitive surface is detected; and

two edges of the cropping mask rectangle that correspond to the first contact are moved concurrently on the display in accordance with the detected movement of the first contact, including horizontally moving one of the two edges and vertically moving the other of the two edges.

24. A computer-implemented method, comprising:

at a computing device with a touch-sensitive surface and a display;

simultaneously displaying on the display;

a digital image, wherein the digital image has an image location on the display and an image area; and

a cropping mask rectangle for the digital image, wherein the cropping mask rectangle has four edges comprising a top edge, a bottom edge, a left edge, and a right edge;

while the computing device is in a digital image manipulation mode;

detecting a first contact and a second contact concurrently on the touch-sensitive surface;

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detecting movement of at least one of the first contact and the second contact across the touch-sensitive surface;

changing the image location on the display in accordance with a change in a location between the first contact and the second contact on the touch-sensitive surface; and

changing the image area in accordance with a change in a distance between the first contact and the second contact on the touch-sensitive surface; and

,

while the computing device is in a cropping mask rectangle manipulation mode;

detecting a third contact and a fourth contact concurrently on the touch-sensitive surface;

determining which contact of the third contact and the fourth contact is a topmost contact on the touch-sensitive surface;

determining which contact of the third contact and the fourth contact is a bottommost contact on the touch-sensitive surface;

determining which contact of the third contact and the fourth contact is a leftmost contact on the touch-sensitive surface;

determining which contact of the third contact and the fourth contact is a rightmost contact on the touch-sensitive surface; and

,

while continuing to detect the third contact and the fourth contact on the touch-sensitive surface;

detecting movement of the third contact across the touch-sensitive surface; and

concurrently moving on the display two edges of the cropping mask rectangle that correspond to the third contact in accordance with the detected movement of the third contact, including horizontally moving one of the two edges and vertically moving the other of the two edges.