{"id":199542,"date":"2020-11-04T11:37:27","date_gmt":"2020-11-04T03:37:27","guid":{"rendered":"http:\/\/4563.org\/?p=199542"},"modified":"2020-11-04T11:37:27","modified_gmt":"2020-11-04T03:37:27","slug":"ios-transform-%e5%9d%90%e6%a0%87%e5%8f%98%e5%8c%96","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=199542","title":{"rendered":"iOS Transform \u5750\u6807\u53d8\u5316"},"content":{"rendered":"
\n
\n
\n

iOS Transform \u5750\u6807\u53d8\u5316 <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : zoule <\/span> <\/i> 3<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u5728\u4f7f\u7528 CGContext \u65f6\uff0c\u7531\u4e8e Quartz 2D \u4e0e UIKit \u5750\u6807\u4e0d\u4e00\u81f4\uff0c\u6240\u4ee5\u9700\u8981\u5bf9 context \u8fdb\u884c\u518d\u4e00\u6b21\u7684\u53d8\u5316\uff0c\u8fbe\u5230\u9884\u671f\u7684\u6548\u679c\u3002<\/p>\n

1.\u4e0d\u540c\u5750\u6807\u539f\u70b9\u4ecb\u7ecd<\/p>\n

\u5728 Quartz 2D \u4e2d\uff0c\u5750\u6807\u539f\u70b9\u5728\u753b\u5e03\u7684\u5de6\u4e0b\u89d2\uff0c\u800c UIKit \u4e2d\uff0c\u4e0e\u5c4f\u5e55\u5750\u6807\u4e00\u81f4\uff0c\u4ee5\u5de6\u4e0a\u89d2\u4e3a\u5750\u6807\u539f\u70b9\u3002<\/p>\n

\u5982\u679c\u4ee5\uff08 0\uff0c0 \uff09\u70b9\u4e3a\u539f\u70b9\u7ed8\u5236 F\uff0c\u90a3\u4e48\u5728\u4e0d\u540c\u7684\u5750\u6807\u7cfb\u5c31\u4f1a\u83b7\u5f97\u5982\u4e0b\u7684\u7ed3\u679c\u3002 \"iOS<\/p>\n

2.Quartz 2D \u4e0e UIKit \u5750\u6807\u7cfb\u8f6c\u5316<\/p>\n

2.1 UIImage \u7ed8\u5236<\/p>\n

\u5728 iOS \u7684 UI \u5f00\u53d1\u4e2d\uff0c\u4ee5 UIImage \u4e3a\u4f8b\uff0c\u7ed8\u5236\u4e00\u5f20\u56fe\u7247\uff0c\u8bbe\u7f6e image \u7684 frame \u4e3a(0, 0, 320, 320)\uff0c\u4f1a\u5f97\u5230\u4e0a\u56fe\u53f3\u7684\u753b\u9762\u3002<\/p>\n

\u5982\u679c\u4f7f\u7528\u5982\u4e0b\u4ee3\u7801\u8bfb\u53d6 Context \u7684 transform\uff0c\u53ef\u4ee5\u770b\u5230\u8fd9\u4e2a transform \u5e76\u4e0d\u662f\u5355\u4f4d\u77e9\u9635\u3002<\/p>\n

CGRect frame = CGRectMake(0.0, 0.0, 720, 1280); UIGraphicsBeginImageContext(frame.size); CGContextRef context = UIGraphicsGetCurrentContext(); CGAffineTransform contextTransform = CGContextGetCTM(context);;<\/em><\/p>\n

\u8fd9\u91cc\u7684 transform \u8bbe\u7f6e\u4f1a\u4f7f Quartz 2D \u4e0e UIKit \u7684\u5750\u6807\u539f\u70b9\u91cd\u5408\uff0c\u4e5f\u662f\u65b9\u4fbf\u4e86 UIKit \u4e2d\u63a7\u4ef6\u7684\u7ed8\u5236\uff0c\u5750\u6807\u7cfb\u53d8\u5316\u53ef\u4ee5\u53c2\u8003\u4e0b\u56fe\u3002 \"iOS<\/p>\n

\u8fd9\u4e5f\u662f\u4e3a\u4ec0\u4e48\u5982\u679c\u76f4\u63a5\u5728\u83b7\u53d6\u5230\u7684 context \u4e0a\u8c03\u7528 CGContextDrawImage \u65f6\u4f1a\u5f97\u5230\u4e00\u4e2a\u53cd\u8f6c\u7684\u56fe\u50cf\u7684\u539f\u56e0\u3002<\/p>\n

\u4f46\u5982\u679c\u4f7f\u7528 UIImage \u7684 drawInRect \u65b9\u6cd5\uff0c\u6587\u6863\u662f\u8fd9\u4e48\u5199\u7684\uff1a Instance Method draw(in:) Draws the entire image in the specified rectangle, scaling it as necessary to fit. Declaration func draw(in rect: CGRect) Parameters rect The rectangle (in the coordinate system of the graphics context) in which to draw the image. Discussion This method draws the entire image in the current graphics context, respecting the image\u2019s orientation setting. In the default coordinate system, images are situated down and to the right of the origin of the specified rectangle. This method respects any transforms applied to the current graphics context, however. This method draws the image at full opacity using the CGBlendMode.normal blend mode.<\/em><\/p>\n

\u4e5f\u5c31\u662f\u8bf4\uff0cUIImage \u7ed8\u5236\u65f6\u4f7f\u7528\u7684\u5750\u6807\u8fd8\u662f UIKit \u7684\u5185\u90e8\u5750\u6807\uff0c\u6240\u4ee5\u5e76\u4e0d\u9700\u8981\u5bf9\u5750\u6807\u7cfb\u505a\u4efb\u4f55\u53d8\u5316\uff0c\u5c31\u53ef\u4ee5\u7ed8\u5236\u51fa\u4e0e rect \u4f4d\u7f6e\u76f8\u540c\u7684\u56fe\u7247\u4e86\uff0c\u5f53\u7136\u8fd9\u4e2a\u65b9\u6cd5\u4e5f\u4f1a\u6839\u636e\u56fe\u7247\u7684\u671d\u5411\u7ed8\u5236\u3002<\/p>\n

2.2 CGContextDrawImage \u7ed8\u5236<\/p>\n

\u5728\u6539\u53d8 context \u7684 transform \u65f6\uff0c\u5b9e\u9645\u4e0a\u5728\u53d8\u5316\u7684\u5176\u5b9e\u662f\u5750\u6807\u7cfb\u672c\u8eab\u3002<\/p>\n

\u800c\u8c03\u7528\u7ed8\u5236\u65b9\u6cd5\u65f6\uff0c\u4f7f\u7528\u7684\u8fd8\u662f\u5750\u6807\u7cfb\u5185\u90e8\u5750\u6807\uff0c\u6240\u4ee5\u5f53\u6211\u4eec\u60f3\u57fa\u4e8e\u83b7\u53d6\u5230\u7684 context \u7ed8\u5236\u4e00\u4e2a\u5982 UIKit \u663e\u793a\u7684\u56fe\u7247\uff0c\u6211\u4eec\u8fd8\u9700\u8981\u5bf9\u7ed8\u5236\u524d\u7684\u5750\u6807\u7cfb\u505a\u8c03\u6574\u3002<\/p>\n

\/\/Y \u8f74\u7ffb\u8f6c CGContextScaleCTM(context, 1, -1);<\/em><\/p>\n

\/\/\u9700\u8981\u56fe\u7247\u539f\u70b9\u4e0e\u5de6\u4e0a\u89d2\u5bf9\u9f50\uff0c\u8fd8\u9700 Y \u8f74\u5411\u4e0b\u5e73\u79fb\u56fe\u7247\u9ad8\u5ea6 CGContextTranslateCTM(context, 0, -imageSize.height);<\/em><\/p>\n

\/\/\u7ed8\u5236\u56fe\u7247 CGContextDrawImage(context, frame, image.CGImage);<\/em> \"iOS<\/p>\n

3 transform \u951a\u70b9\u53d8\u5316<\/p>\n

\u6bd4\u5982\u56fe\u7247\u7f16\u8f91\u9875\u9762\uff0c\u6211\u4eec\u7ecf\u5e38\u80fd\u78b0\u5230\u4f7f\u7528\u624b\u52bf\u5bf9\u56fe\u7247\u8fdb\u884c\u7f29\u653e\u65cb\u8f6c\u4f4d\u79fb\u7b49\u53d8\u5316\uff0c\u4e4b\u540e\u751f\u6210\u4e00\u5f20\u65b0\u7684\u56fe\u7247\u3002<\/p>\n

\u6839\u636e\u4e0d\u540c\u7684\u624b\u52bf\u56de\u8c03\uff0c\u6211\u4eec\u53ef\u4ee5\u4fee\u6539 view.transform\uff0c\u4f7f\u5f97\u754c\u9762\u4e0a\u7684 view \u4ea7\u751f\u4e0e\u624b\u52bf\u76f8\u5e94\u7684\u53d8\u5316\u3002<\/p>\n

\u5728\u8fd9\u91cc\uff0cUIKit \u4e3a\u4e86\u65b9\u4fbf\u6211\u4eec\u4fee\u6539 UI \u754c\u9762\uff0cview \u7684 transform \u662f\u4ee5 view \u7684 center \u4e3a\u951a\u70b9\u7684\u3002<\/p>\n

UIView \u7684 transform \u91cc\u9762\u7684\u63cf\u8ff0\u662f\u4f7f\u7528 center \u6765\u4fee\u6539 position \u3002<\/p>\n

Use this property to scale or rotate the view’s frame rectangle within its superview’s coordinate system. (To change the position of the view, modify the center property instead.) The default value of this property is CGAffineTransformIdentity.<\/em><\/p>\n

\u800c\u5f88\u591a\u5176\u4ed6\u7684\u65b9\u6cd5\u5728\u8c03\u7528\u65f6\uff0ctransform \u90fd\u9700\u8981\u4ee5\u5de6\u4e0a\u89d2\u4e3a\u951a\u70b9\uff0c\u6240\u4ee5\u8fd9\u91cc\u6709\u9700\u8981\u505a\u4e00\u6b21\u8f6c\u5316\uff0c\u951a\u70b9\u5f71\u54cd\u5982\u4e0b\u56fe\u3002 \"iOS<\/p>\n

\u5728 UI \u754c\u9762\u7684\u4fee\u6539\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u7f29\u653e\u548c\u65cb\u8f6c\u624b\u52bf\u7684\u56de\u8c03\u503c\u76f4\u63a5\u4fee\u6539 view \u7684 transform\uff0c\u4ee5\u53ca\u4f4d\u79fb\u7684\u56de\u8c03\u6765\u4fee\u6539 center\uff0c\u4fbf\u53ef\u4ee5\u8fbe\u5230\u6211\u4eec\u9884\u671f\u7684\u6548\u679c\u3002\u4f46\u8fd9\u4e2a transform \u65e0\u6cd5\u4f7f\u7528\u5728 context \u7684\u7ed8\u5236\u4e0a\uff0c\u56e0\u4e3a\u5750\u6807\u7cfb\u7684\u53d8\u5316\uff0c\u662f\u4ee5\u539f\u70b9\u4e3a\u951a\u70b9\u6765\u505a\u7684\u3002<\/p>\n

\u6240\u4ee5\u9488\u5bf9 context \u73b0\u6709\u5750\u6807\u7cfb\u7684\u4f4d\u7f6e\uff0c\u951a\u70b9\u5728\u5de6\u4e0a\u89d2\uff0c\u9700\u8981\u8fdb\u884c\u4e00\u6b21 transform \u7684\u4fee\u6539\u3002<\/p>\n

\u6839\u636e\u4e0a\u56fe\u4e5f\u53ef\u4ee5\u770b\u51fa\uff0c\u951a\u70b9\u53ea\u4f1a\u5bf9\u4f4d\u7f6e\u4fe1\u606f\u4ea7\u751f\u5f71\u54cd\uff0c\u5e76\u4e0d\u4f1a\u6539\u53d8\u7f29\u653e\u548c\u65cb\u8f6c\u3002<\/p>\n

UIImage *image; \/\/\u521d\u59cb\u5316\u56fe\u7247<\/p>\n

UIView *view;\/\/\u5e94\u7528\u53d8\u5316\u7684 view,view \u7684 size \u8ddf image \u8981\u4e00\u81f4\u4fdd\u8bc1\u7f29\u653e\u6bd4\u4f8b\u662f\u5bf9\u7684\u3002<\/p>\n

CGAffineTransform transform = view.transform; CGSize imageSize = image.size; transform.tx = view.center.x; transform.ty = view.center.y; transform = CGAffineTransformTranslate(transform, -imageSize.width * 0.5, -imageSize.height * 0.5);<\/em><\/p>\n

\u5176\u4e2d tx,ty \u4e3a\u951a\u70b9\u5728\u5750\u6807\u7cfb\u7684\u4f4d\u7f6e<\/p>\n

\u5f53\u524d\u7684\u951a\u70b9\u5728\u89c6\u56fe\u7684\u4e2d\u5fc3\u70b9\uff0c\u6211\u4eec\u9700\u8981\u6539\u53d8\u5230\u89c6\u56fe\u7684\u5de6\u4e0a\u89d2\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u548c\u5750\u6807\u7cfb\u539f\u70b9\u91cd\u5408\u3002\u5176\u4e2d*\uff08 imageSize.width * 0.5, imageSize.height * 0.5 \uff09*\u4e3a\u951a\u70b9\u5728\u56fe\u7247\u4e2d\u7684\u4f4d\u7f6e\uff0c\u6b64\u65f6 transform \u4e3a\u951a\u70b9\u5728\u89c6\u56fe\u5de6\u4e0a\u89d2\u65f6\u7684\u53d8\u5316\u77e9\u9635\u3002<\/p>\n

4.\u7ec4\u5408 Transform<\/p>\n

\u5728 CGContext \u4e0a\u60f3\u5f97\u5230\u4e0a\u56fe\u4e2d\u95f4\u7684\u7ed3\u679c\uff0c\u4e0d\u4ec5\u9700\u8981\u5e94\u7528\u7f29\u5c0f 1\/2 \u548c\u65cb\u8f6c 45 \u5ea6\u7684\u53d8\u5316\uff0c\u8fd8\u9700\u8981\u8c03\u6574\u3002<\/p>\n

\u4e4b\u524d\u8bf4\u8fc7 CGContext \u5e94\u7528\u65cb\u8f6c\u662f\u5e94\u7528\u5728\u5750\u6807\u7cfb\u4e0a\uff0c\u8ddf\u89c6\u56fe\u5e94\u7528\u65cb\u8f6c\u7684\u65b9\u5f0f\u662f\u81ea\u8eab\u5750\u6807\u7cfb\u662f\u4e00\u81f4\u7684\u3002\u6240\u4ee5\u5f53\u76f4\u63a5\u83b7\u53d6\u5230\u7684 CGContext\uff0c\u4f18\u5316\u540e\u7684\u5750\u6807\u7cfb\u4e5f\u662f\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\u65f6\uff0c\u53ef\u4ee5\u76f4\u63a5\u518d CGContext \u4e0a\u5e94\u7528\u6211\u4eec\u8ba1\u7b97\u51fa\u7684 transform \u3002<\/p>\n

\u4e4b\u540e\u8fd8\u662f\u7531\u4e8e\u5750\u6807\u7cfb\u7ed8\u5236\u662f\u4ee5\u81ea\u8eab\u5750\u6807\u7cfb\u8ba1\u7b97\uff0c\u518d\u505a\u4e00\u8f6e\u5750\u6807\u7cfb\u7684\u7ffb\u8f6c\u548c\u4f4d\u79fb\u6765\u5f97\u5230\u6700\u540e\u7684\u7ed3\u679c\uff0c\u7c7b\u4f3c\u4e0b\u56fe\u7684\u64cd\u4f5c\u3002<\/p>\n

\"iOS<\/p>\n

\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\uff0c\u6bcf\u4e00\u6b21\u65b0\u7684\u53d8\u5316\u90fd\u662f\u5728\u4e4b\u524d\u53d8\u5316\u7684\u57fa\u7840\u4e0a\uff0c\u6240\u4ee5\u65e0\u8bba\u662f view \u8fd8\u662f\u5bf9 context \u7684 transform \u505a\u4fee\u6539\u90fd\u662f\u6709\u987a\u5e8f\u7684\uff0c\u8fd9\u4e00\u70b9\u4e0e\u77e9\u9635\u4e58\u6cd5\u4e00\u81f4\uff0c\u987a\u5e8f\u4f1a\u5f71\u54cd\u7ed3\u679c\u3002<\/p>\n<\/p><\/div>\n

\u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (1<\/span>) <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : chengsitom <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    \u56fe\u5168\u6302\u4e86\uff0c\u975e\u5e38\u5f71\u54cd\u89c2\u770b <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"

    iOS Transform \u5750\u6807\u53d8…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/199542"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=199542"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/199542\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=199542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=199542"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=199542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}