quartz2d-Drawing -00-Knowledge points

1>Introduction to watermark ppt*image Watermark Effect: Prevent others from stealing pictures, add some logos, create a new picture. * How to create a new picture?as with the drawing, need to get context to do things, here also need to get context, create a new picture. *What's the context?    Bitmap context, in this context to draw things, you can output to the new image. *How to get it? The previous use of the layer context, the system will be created automatically, but we bitmap context, we need to manually create*Summary: As long as the context is not related to the view, we need to create it manually. *where to get the image context, viewdidload, do not need to get the system created layer context, no need to write in the DrawRect method, directly viewdidload on the line. *How do I create an image context? I've said earlier about what to start with, Uigraphics .*uigraphicsbeginimagecontextwithoptions: Look at the annotations, create bitmap, creating a bitmap context, and this method gets the clearest picture. * Explanation parameter (size: new picture size Opaque:yes: Opaque No: transparent scale:0.0no scaling)*Draw content (picture, text)*get Picture: Generate a picture of the contents of the bitmap context for you. *closes the context and does not shut down until the memory is occupied. *Display on Uiimageview*save picture, write to file, UIImage cannot write, need to convert to NSData binary data*uiimagejpegrepresentation: can set picture quality*uiimagepngrepresentation: Convert a picture to binary data in PNG format, the PNG format is the most clear by default. *Write to Desktop2>Introduction to Picture clipping ppt*Picture Clipping*ppt Analysis Idea: First set the clipping area, the picture is drawn up, beyond the clipping area of the automatic cutting off. *load old pictures, and get context dimensions based on old pictures. * Dimension of context =the size of the new picture* How big a context is open?: As large as the picture size, avoid compressing the picture.    If it is smaller than the picture size, the picture is compressed. *Set crop area: a circle tangent to the picture*Draw old Pictures*get a new picture*Close Context*clip with Ring: Add a small ring outside the cropped picture. *ppt Analysis idea: first draw a great circle, in the set clipping area, the picture is drawn up, beyond the cutting area of the automatic cutting off. *load old pictures, and get context dimensions based on old pictures. *determine the ring width borderw* Dimension of context =the size of the new picture* Determine the new context dimension: Newimagew:oldimagew +2* Borderw Newimageh:oldimageh +2*Borderw,*draw a great circle:1. Get context2. Add path to Context3. Set the color of the circle = the color of the ring4. Rendering* Set the cropping area as large as the picture size, except that x, Y is different, x=borderw,y=Borderw. *Draw old Pictures*get a new picture*Close Context*extraction category, 3 parameters, picture name, ring width, ring color3>about the screen*Screen: Screen content screenshot to create a new picture*usually in development, it is the control of the contents of the screen, create a new picture*How is the controller displayed? According to the View* How is the view displayed?based on layer layers*render layer to bitmap context*Note: Layers can only be rendered, and pictures and text are available with draw* Where is the rendering?New pictures*turn on the picture context, and the same size as the view*writing to the desktop*Pumping Classification4>gesture Unlocking*Demo Instance Program*The analysis interface has several controls: background: Uiimageview White Circle: button (click on him, there will be another picture, the button can be set in different states of the picture.) Separate view: (Draw line is a range, when beyond the view can not draw lines)*Hmloadview: Custom View, when the view is created, add 9 buttons. *Add a button in the Initwithcoder,initwithframe method. *Nine Gongge layout: Tolcol=3The x, y of the Calculate Row,col button is related to Col,row, Col= i% tolcol row = I/tolcol Calculating margin margin= (View.bounds.size.width-tolcol * btnw)/(Tolcol +1) Btnx= margin + (btnw + margin) *Col Btny= (BTNW + margin) *Row*the circle is selected*What do you do when you click the button to select a picture?      Tap the Monitor button. *cannot addtarget: Cannot display the selected picture in time. *Monitor the Touchbegin and judge the point on the frame that is not on the button. *Touchbegin not called? Cause: The event is handed to the button handle and the event should be given to the unlock view.      Let the button not receive events. * Set button does not allow interaction, 2 useful:1. Do not receive events2. Canceling the highlight effect double benefit*go through all the buttons, see which button the touch point is on, select who, cgrectcontainspoint the incoming parameter must be the same coordinate system*Implement the Touchmove method: Because the finger moves, you also need to determine the point is not on the button. *pumping method, because the Touchmove method, also need to do the same thing. 1>Pointwithtouches the touch points according to the touches collection2>Buttonwithpoint the touch point to get the touchscreen button*round wire.*what needs to be wired? There is a connection between the selected buttons and an extra line*connect all the selected buttons first?     Why, because the extra line is drawn from the center of the last button, where the finger moves. *Make the number group Save all the selected buttons, traverse all the buttons in the DrawRect method, connect*Uibezierpath Draw lines, no context required. *How many Uibezierpath objects do you need?     One, the path is continuous, not connected, only need to create a new uibezierpath. *iterating through an array, describing the path1>starting point: The center of the first button2>add a line to the center of the other button*set the color and line width of a path*when does it render?     Once you've finished describing all the paths, it's enough to render them once. *The [path stroke] can be rendered to the view. *draw the extra line and remember where the finger is moving. * Setneeddisplay no drawing line?because DrawRect is only called once and needs to be redrawn each time the finger is moved. * Touchbegin not call Setneeddisplay?Repainting was useless at the time, only the beginning. *Linejoinstyle: Something with a sharp tip, a line connection style problem, set to flat. *buttons that are already selected, do not need to be checked again, and draw lines*Lift your finger, cancel all the selected buttons, and empty the array to clear the line*DrawRect The array is not checked and does not need to draw a line. * How to tell if the user entered correctly?bind tag to the selected button, traverse all the selected buttons, and stitch the tag into a string. 5>Artboard Demo: Analysis controls: ToolBar (frame with no control in the face), artboard view, custom toolbars (convenient screen fit, quick fix to the position of the face control) automatic layout drawing ideas: Describe the path first, in the rendering. Drawing Features:*Touchbegin Set Line start: Point to start touching*how to set a starting point? Create a Uibezierpath, Bezier path to set a starting point*TouchMove: Draw where you move your finger, addline to the point of movement*Setneeddisplay, the path description is finished, the rendering to the view is good. *can only draw a line? DrawRect method Each time will clear the previous, redraw*How do I draw multiple paths? Make the number group save the last time*Set line width: Change the width of the next path each time you slide the slider*listen for the value of the slider, pass the value to Paintview, and set the line width of the path. *can not write in DrawRect, will cause all paths are a line width, should be each path to record their own line width, and the line width only need to set once, at the time of the creation of the path is set. *To set the color:*custom Uibezierpath, save colors, implement a path corresponding to a color assist function:*Clear screen: Clears all path arrays*undo: Remove the last path*Eraser: Set the brush to white*Save:1>screenshot The contents of the artboard2>Save the picture to the album Uiimagewritetosavedphotosalbum3>the callback method to save the album cannot be Image:didFinishSavingWithError:contextInfo and must follow the rules:*Photo Selection1>I usually go to the photo album.2>Uiimagepickercontroller, you can go to the phone album.3>with modal, no navigation controller, no push4>set up a proxy to get pictures5>Pass the picture to Paintview6>add to the path, and then redraw. : Pictures also need to be in order*Photo processing1>ppt Painting idea: Make a transparent view with the same as the artboard, there is a uiimageview to show the pictures we choose from the photo gallery, and then the Uiimageview to rotate, zoom and other operations2>Uimageview can not be placed inside the layoutsubviews to set the size, because to set his deformation, the default will call his father's layoutsubviews, leading to some inexplicable reasons3>set his size, and position, to give him the same size as the picture, displayed in the middle of the picture.4>long-Press operation: At the end of the long press, do the operation1. Default highlight state, first lighter in recovery, set Alpha2after the animation is over, take your own screenshot and pass it to the controller, and give it to the Paintview display.3The parent view needs to be removed, the mission is complete, and it is not removed, it cannot be drawn, always added to the Paintview

quartz2d-Drawing -00-Knowledge points