{"id":1443,"date":"2019-08-13T11:04:28","date_gmt":"2019-08-13T02:04:28","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=1443"},"modified":"2019-08-13T11:04:34","modified_gmt":"2019-08-13T02:04:34","slug":"android%ec%9d%98-canvas%ec%97%90-%ea%b7%b8%eb%a0%a4%eb%b3%b4%ec%9e%90-%ec%9c%a0%ec%9a%a9%ed%95%9c-%ea%b7%b8%eb%9e%98%ed%94%bd%ec%8a%a4-%ed%81%b4%eb%9e%98%ec%8a%a4%ec%99%80-%ea%b8%b0%eb%8a%a5","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=1443","title":{"rendered":"Android\uc758 Canvas\uc5d0 \uadf8\ub824\ubcf4\uc790 : \uc720\uc6a9\ud55c \uadf8\ub798\ud53d\uc2a4 \ud074\ub798\uc2a4\uc640 \uae30\ub2a5\ub4e4"},"content":{"rendered":"<p>\uc6d0\ubb38 :\u00a0https:\/\/medium.com\/over-engineering\/android-canvas-drawing-useful-graphics-classes-operations-2803e435e848<\/p>\n<hr \/>\n<p>\uc548\ub4dc\ub85c\uc774\ub4dc \uce94\ubc84\uc2a4\uc5d0 \ubb54\uac00 \uadf8\ub9ac\ub294\uac74 \uc0c1\ub2f9\ud788 \ud798\ub4e0 \uc791\uc5c5\uc785\ub2c8\ub2e4. \ub9ce\uc740 \ud074\ub798\uc2a4\uc640 \uac1c\ub150\ub4e4\uc774 \ubb54\uac00 \uadf8\ub9b4 \ub54c \uc774\ud574\ub97c \ub3d5\uae30 \uc704\ud574 \uc874\uc7ac \ud569\ub2c8\ub2e4. \ub9cc\uc57d<a href=\"https:\/\/www.charlezz.com\/?p=1433\"> \uc774\uc804 \ud3ec\uc2a4\ud2b8<\/a>\ub97c \uc77d\uc9c0 \uc54a\uc558\ub2e4\uba74\u001e\uaf2d \uba3c\uc800 \ucc38\uace0\ud574\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n<p>\uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 \uc548\ub4dc\ub85c\uc774\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \ud3ec\ud568\ub418\uc5b4\uc788\uace0 \uce94\ubc84\uc2a4\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc720\uc6a9\ud55c \uba87\uba87 \ud074\ub798\uc2a4\ub4e4\uc5d0 \ub300\ud574\uc11c \uc54c\uc544 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>Rect \/ RectF<\/h2>\n<p><strong>top<\/strong>, <strong>left<\/strong>, <strong>right<\/strong>, <strong>bottom\u00a0<\/strong>\uc774 4\uac00\uc9c0 \uc815\ubcf4\ub97c \ub2f4\uace0 \uc788\ub294 \uc9c1\uc0ac\uac01\ud615 \ud074\ub798\uc2a4 \uc785\ub2c8\ub2e4.<br \/>\n\uc774 \ud074\ub798\uc2a4\ub4e4\uc740 \uce94\ubc84\uc2a4\uc5d0 \uc9c1\uc811\uc801\uc73c\ub85c \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\uac70\ub098 \ub610\ub294 \uadf8\ub9ac\uace0 \uc2f6\uc740 \uac1d\uccb4\uc758 \uc0ac\uc774\uc988 \uc815\ubcf4\ub97c \uc800\uc7a5 \ud574\ub450\ub294 \uc6a9\ub3c4\ub85c \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n<p>Rect\uc640 RectF\uc758 \ucc28\uc774\uc810\uc740 Rect\ub294 Integer \uac12\uc744 \uc800\uc7a5\ud558\uace0, RectF\ub294 float \uac12\uc744 \uc800\uc7a5\ud55c\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:java decode:true \">val rect = RectF(100.0f, 200.0f, 300.0f, 400.0f)<\/pre>\n<p>KTX\ub77c\uc774\ube0c\ub7ec\ub9ac\ub974 \uc0ac\uc6a9\ud558\uba74 \uc720\uc6a9\ud55c \uadf8\ub798\ud53d\uc2a4 \uc5d1\uc2a4\ud150\uc158 \ud568\uc218\ub4e4\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 Rect \uc640 RectF\uc758 \uac1d\uccb4\ub97c \uc5ec\ub7ec \ubcc0\uc218\ub85c \ubd84\ub9ac\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. (Destructuring Declarations, \ube44\uad6c\uc870\ud654 \uc120\uc5b8)<\/p>\n<pre class=\"lang:java decode:true \">val rect = RectF(100.0f, 200.0f, 300.0f, 400.0f)\r\nval (left, top, right, bottom) = rect\r\n\/\/ left = 100.0f, top = 200.0f, right = 300.0f, bottom = 400.0f<\/pre>\n<p>Rect\ud074\ub798\uc2a4\ub85c \ub2e4\ub978 \uc791\uc5c5 \uc791\uc5c5\ub3c4 \ud560 \uc218 \uc788\ub294\ub370, \uc608\ub97c \ub4e4\uc5b4 Rect 2\uac1c\ub97c \ubcd1\ud569 \ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uac83\uc740 KTX\uac00 \uc5c6\uc5b4\ub3c4 \uae30\ubcf8\uc801\uc73c\ub85c Rect\/RectF\uc5d0 \ud3ec\ud568\ub41c \uae30\ub2a5\uc778\ub370, \ub354 \ud070 \uc9c1\uc0ac\uac15\ud615\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub294 \ucabd\uc73c\ub85c \ubcd1\ud569\ud558\uc5ec \uac12\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uae30\ub2a5\uc744 \uc704\ud55c \uba87\uba87 \uc775\uc2a4\ud150\uc158 \ud568\uc218\uac00 \uc788\uc9c0\ub9cc \uc775\uc2a4\ud150\uc158 \uc5c6\uc774\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:java decode:true\">val rect = RectF(100.0f, 200.0f, 300.0f, 400.0f)\r\nval otherRect = RectF(50.0f, 400.0f, 150.0f, 500.0f)\r\nrect.union(otherRect)\r\n\/\/ rect = RectF(50.0, 200.0, 300.0, 500.0)\r\n\/\/ \uc704\uc5d0\uac83 \ub300\uc2e0\uc5d0\r\nval combinedRect = rect + otherRect\r\n\/\/ \ub610\ub294 \uc774\ub807\uac8c\r\nval combinedRect = rect or otherRect\r\n\/\/ combinedRect = RectF(50.0, 200.0, 300.0, 500.0)<\/pre>\n<p>Rect\uc5d0\uc11c \uc0ac\uc6a9\ud560\uc218 \uc788\ub294 \ub2e4\ub978 \uae30\ub2a5\uc73c\ub85c <strong>and<\/strong>, <strong>xor<\/strong>, <strong>or<\/strong> \ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>Point \/ PointF<\/h2>\n<p>Point\ub294 x \uadf8\ub9ac\uace0 y \uc88c\ud45c\ub97c \uc800\uc7a5\ud558\uace0 \uc788\uace0 \uce94\ubc84\uc2a4\uc5d0\uc11c &#8216;\uc810&#8217;\uc744 \ud45c\ud604\ud569\ub2c8\ub2e4. Point\ub294 Integer \uac12\uc744 \uac00\uc9c0\uace0 \uc788\uc73c\uba70 PointF\ub294 Float\ud615 \uac12\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:java decode:true \">val point = PointF(200.0f, 300.0f)<\/pre>\n<p>KTX\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uba74 \uba87\uba87 \uc775\uc2a4\ud150\uc158\uc744 \uc0ac\uc6a9\ud560\uc218 \uc788\ub294\ub370\uc694. Point\ub97c \uc880 \ub354 \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uba74, <strong>+<\/strong> \uc640 <strong>&#8211;<\/strong> \uac19\uc740 \ub450\uac1c\uc758 \uac12\uc744 \ub354\ud558\uace0 \ube7c\ub294 \uc5f0\uc0b0\uc790\uac00 \ud3ec\ud568\ub418\uc5b4\uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:java decode:true \">val start = PointF(100.0f, 30.0f)\r\nval end = PointF(20.0f, 10.0f)\r\nval difference = start - end\r\nval together = start + end\r\n\/\/ together = Point(120.0f, 40.0f)<\/pre>\n<p>\uc774 \ud074\ub798\uc2a4\ub4e4\uc744 \uc704\ud55c \ube44\uad6c\uc870\ud654 \uc120\uc5b8 \ub610\ud55c \uc874\uc7ac\ud569\ub2c8\ub2e4. \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \uc27d\uac8c x \ub610\ub294 y \uac12\uc744 \uaebc\ub0b4\uc5b4 \uc4f8 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:java decode:true \">val start = PointF(100.0f, 30.0f)\r\nval end = PointF(20.0f, 10.0f)\r\nval (x, y) = start - end\r\n\/\/ x = 80.0f y = 20.0f<\/pre>\n<h2>Matrix<\/h2>\n<p>3 x 3 \ud589\ub82c \uc5d0\uc11c\ub294 \uce94\ubc84\uc2a4\ub97c \ubcc0\ud615\uc2dc\ud0ac \uc218 \uc788\ub294 \uc815\ubcf4\ub97c \ub2f4\uace0 \uc788\uc2b5\ub2c8\ub2e4. Matrix\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ud615\ud0dc\ub97c \uc800\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\ud655\ub300\/\ucd95\uc18c \ube44\uc728<\/li>\n<li>\uc65c\uace1<\/li>\n<li>\ud68c\uc804<\/li>\n<li>\uc774\ub3d9<\/li>\n<\/ul>\n<p>\uc544\ub798\uc758 \uc608\uc81c\ub4e4\uc740 Matrix\ub97c \uc0ac\uc6a9\ud558\uc5ec Bitmap\uc744 \ubcc0\ud615\ud558\uc5ec \uce94\ubc84\uc2a4\uc5d0 \uadf8\ub9b0\uac83\uc785\ub2c8\ub2e4.<\/p>\n<p><a href=\"https:\/\/www.charlezz.com\/?attachment_id=1444\" rel=\"attachment wp-att-1444\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2019\/08\/1_g_QRjRDo6rzcjPz4vWGvnA.png\" alt=\"\" width=\"700\" height=\"222\" class=\"aligncenter size-full wp-image-1444\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2019\/08\/1_g_QRjRDo6rzcjPz4vWGvnA.png 700w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2019\/08\/1_g_QRjRDo6rzcjPz4vWGvnA-300x95.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>\uadf8\ub9bc\uc744 \uadf8\ub9b4\ub54c Matrix\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:java decode:true \">val customMatrix = Matrix()\r\n\/\/ in onDraw()\r\ncustomMatrix.postRotate(20.0f)\r\ncanvas.withMatrix(customMatrix) {\r\n    drawBitmap(bitmap, null, rect, paint)\r\n}<\/pre>\n<p>\uc704\uc758 \ucf54\ub4dc\ub294 \uce94\ubc84\uc2a4\uc704\uc5d0 \ube44\ud2b8\ub9f5\uc744 \uadf8\ub9ac\uace0 \uc774\ub97c 20\ub3c4 \ud68c\uc804\ud55c \uac83\uc785\ub2c8\ub2e4. Matrix\uc5d0\ub294 \ud655\ub300\ub97c \ud558\uac70\ub098 \ud68c\uc804\uc744 \ud558\uac70\ub098 \uc65c\uace1\uc744 \uc2dc\ud0a8\ub2e4\uac70\ub098 \ud558\ub294 \uae30\ub2a5\ub4e4\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. Matrix\ub97c \uc0ac\uc6a9\ud558\ub294\ub370 \uc88b\uc740\uc810\uc740 Canvas\uc5d0\uc11c \ubcc0\ud615\uc744 \uc790\uc720\uc790\uc7ac\ub85c \ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4. Matrix\ub294 \uc801\uc6a9\ub41c \ubcc0\ud615\uc5d0 \ub204\uc801\ub41c \uc815\ubcf4\ub4e4\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub9cc\uc57d Matrix\ub97c \uc774\ub3d9\ud558\uace0, \ud68c\uc804\ud558\uace0, \ud655\ub300\ud55c \ub2e4\uc74c \ub2e4\uc2dc \uc774\ub3d9\ud55c\ub2e4\uba74 \ub9c8\uc9c0\ub9c9 \uc774\ub3d9\ud55c \uac12\uc740 \ucc98\uc74c\uc5d0 \uc801\uc6a9\ud588\ub358 \uac12\uacfc\ub294 \uc870\uae08\uc740 \ub2e4\ub985\ub2c8\ub2e4.\u00a0 \ub9cc\uc57d \uc77c\ubc18\uc801\uc778 Canvas\uc758 \uc774\ub3d9 \ud655\ub300 \ub4f1\uc758 \uae30\ub2a5\uc744 \uc9c1\uc811 \uc218\ud589\ud55c\ub2e4\uba74 \uc9c1\uc811 \uc774\ub97c \uacc4\uc0b0\ud574\uc57c\ud569\ub2c8\ub2e4.\u00a0<\/p>\n<h3>preRotate vs postRotate vs setRotate<\/h3>\n<p><a href=\"https:\/\/ko.wikipedia.org\/wiki\/%ED%96%89%EB%A0%AC_%EA%B3%B1%EC%85%88\">\ud589\ub82c \uacf1\uc149<\/a>\uc740 \uad50\ud658\ubc95\uce59\uc774 \uc131\ub9bd\ub418\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0, \uc138 \uba54\uc18c\ub4dc\uac00 \uc874\uc7ac\ud558\uace0 \uacb0\uacfc\uac12\uc774 \ub2e4\ub985\ub2c8\ub2e4.<\/p>\n<ul>\n<li>preRotate :\u00a0<span>M&#8217; = \uae30\uc874 \ud589\uc5f4\uc5d0 \ud68c\uc804 \ud589\ub82c\uc744 \uacf1\ud569\ub2c8\ub2e4. M * R(degrees)<\/span><\/li>\n<li>postRotate :\u00a0<span>M&#8217; = \ud68c\uc804 \ud589\ub82c\uc5d0 \uae30\uc874 \ud589\ub82c\uc744 \uacf1\ud569\ub2c8\ub2e4. R(degrees) * M<\/span><\/li>\n<li>setRotate : \uae30\uc874 \ud589\ub82c\uc758 \ud68c\uc804\uac12\uc744 (0,0) \ub9ac\uc14b\ud558\uace0, \ud68c\uc804 \ud589\ub82c \uac12\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<h2>Matrix\ub97c \uc0ac\uc6a9\ud55c \uc6d0\uadfc\ubc95 \uadf8\ub9ac\uae30<\/h2>\n<p>Matrix\uac1d\uccb4\ub294 \uc6d0\uadfc\ubc95 \uadf8\ub9ac\uae30\ub97c \uac00\ub2a5\ud558\uac8c \ud574\uc8fc\ub294\ub370, Canvas\uc758 \ubcc0\ud615 API\ub97c \uc774\uc6a9\ud574\uc11c\ub294 \ubd88\uac00\ub2a5\ud569\ub2c8\ub2e4. \uce94\ubc84\uc2a4\uc758 \ud22c\uc2dc\ub3c4 \ub610\ub294 \uae30\uc6b8\uae30\ub97c \ud5c8\uc6a9\ud558\ub294 \ud568\uc218\ub294 Matrix.setPolyToPoly() \uc785\ub2c8\ub2e4.\u00a0 \uc774 \uba54\uc18c\ub4dc\ub294 \ucc98\uc74c\uc5d0\ub294 \uc57d\uac04 \ud63c\ub780\uc2a4\ub7fd\uc9c0\ub9cc \uc791\ub3d9\ubc29\uc2dd\uc5d0 \ub300\ud574 \uacf0\uacf0\ud788 \uc0dd\uac01\ud574\ubcf4\uba74 \uadf8\ub2e4\uc9c0 \uc5b4\ub835\uc9c4 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n<p>setPolyToPoly \uba54\uc18c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \ube44\ud2b8\ub9f5\uc744 \uc65c\uace1\ud55c \uc608\uc81c \uc785\ub2c8\ub2e4.<\/p>\n<p><a href=\"https:\/\/www.charlezz.com\/?attachment_id=1445\" rel=\"attachment wp-att-1445\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2019\/08\/1_gu2RI-dJ0kcP4S8Xsk-vAA.png\" alt=\"\" width=\"500\" height=\"618\" class=\"aligncenter size-full wp-image-1445\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2019\/08\/1_gu2RI-dJ0kcP4S8Xsk-vAA.png 500w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2019\/08\/1_gu2RI-dJ0kcP4S8Xsk-vAA-243x300.png 243w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>setPolyToPoly \uba54\uc18c\ub4dc\ub294 \uc785\ub825\ub41c (src) Point\uc640 \uadf8\ub9ac\uace0 \uc9c0\uc815\ub41c \ucd9c\ub825 (dst) Point\uc5d0 \ub9f5\ud551\ud569\ub2c8\ub2e4. Point\ub77c\uace0\ub294 \ud588\uc9c0\ub9cc \uc77c\ubc18\uc801\uc73c\ub85c \uc0dd\uac01\ud558\ub294 \uc810\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uadf8\uc800 \uc5f0\uc0b0\uc5d0 \ud544\uc694\ud55c float \ubc30\uc5f4 \uac12\uc77c \ubfd0\uc774\ubbc0\ub85c \uadf8\ub798\ud53d\uc2a4\uc5d0 \uc774\uc81c \uc785\ubb38\ud588\ub2e4\uba74 \uc544\uc9c1 \uc775\uc219\uce58 \uc54a\uc744 \uac81\ub2c8\ub2e4.<\/p>\n<p>\uc544\ub798\uc758 src \ubc30\uc5f4\uc5d0\uc11c \ucc98\uc74c \ub450 \uac12\uc740 \uc774\ubbf8\uc9c0\uc758 \uc67c\ucabd \uc0c1\ub2e8 \uc9c0\uc810\uc744 \ub098\ud0c0\ub0b4\uace0 \ub450\ubc88\uc9f8 \ub450 \uac12\uc740 \uc624\ub978\ucabd \uc0c1\ub2e8 \uc9c0\uc810 \ub4f1\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \uc774 \uc810\ub4e4\uc740 \uc784\uc758\uc758 \uc21c\uc11c\uac00 \ub420 \uc218 \uc788\uc9c0\ub9cc dst \ubc30\uc5f4\uc5d0\uc11c \ub9e4\ud551\ud558\ub824\ub294 \ud574\ub2f9 \uc810\uacfc \uc77c\uce58\ud574\uc57c\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:java decode:true\">val src = floatArrayOf(\r\n    0f, 0f, \/\/ top left point\r\n    width, 0f, \/\/ top right point\r\n    width, height, \/\/ bottom right point\r\n    0f, height \/\/ bottom left point\r\n)\r\nval dst = floatArrayOf(\r\n    50f, -200f, \/\/ top left point\r\n    width, -200f, \/\/ top right point\r\n    width, height +200f, \/\/ bottom right point\r\n    0f, height \/\/ bottom left point\r\n)\r\nval pointCount = 4 \/\/ number of points\r\n\/\/ \ub450\ubc88\uc9f8 \uadf8\ub9ac\uace0 \ub124\ubc88\uc9f8 \uc778\uc790\ub294 src \uc640 dest \ubc30\uc5f4\uc5d0\uc11c \ud3ec\uc778\ud2b8\uac00 \ub9e4\ud551\ub418\uae30 \uc2dc\uc791\ud558\ub294 \uc778\ub371\uc2a4\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.\r\nnewMatrix.setPolyToPoly(src, 0, dst, 0, pointCount)\r\ncanvas.withMatrix(newMatrix) {\r\n   drawBitmap(bitmap, null, rect, paint)\r\n}<\/pre>\n<p>\uc774 \uc608\uc81c\uc5d0\uc11c \uc624\ub978\ucabd \uc544\ub798\uc810\uc740 [width, height] \uc9c0\uc810\uc5d0\uc11c [width, height + 200f] \uc9c0\uc810\uc73c\ub85c \ub9e4\ud551\ub429\ub2c8\ub2e4. \uc608\uc81c\uc5d0\uc11c Matrix\uac00 \ub9e4\uc6b0 \uac15\ub825\ud558\uace0 \ud765\ubbf8\ub85c\uc6b4 \uc77c\ub4e4\uc744 \ud558\uace0 \uc788\uc74c\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><em><strong>Tip : Matrix\uc5d0 \ub300\ud574 \uc880 \ub354 \uc54c\uae30 \uc704\ud574\uc11c <a href=\"https:\/\/www.charlezz.com\/?p=934\">\uc774\uc804 \ud3ec\uc2a4\ud2b8<\/a>\ub97c \ucc38\uace0\ud574\ubcf4\uc138\uc694<\/strong><\/em><\/p>\n<p>\ud558\ub098\uc758 \ubdf0\ub97c \ub2e4\ub8e8\ub294\ub370 \ub450\uac1c\uc758 \ub2e4\ub978 \uc88c\ud45c\uacc4\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \uacbd\uc6b0, Matrix \ud074\ub798\uc2a4\ub97c \ud65c\uc6a9\ud558\uba74 \ub450 \uc88c\ud45c\uacc4\ub97c \ub9e4\ud551\ud558\ub294\ub370 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<p>\uc608\ub97c \ub4e4\uc5b4, \ud654\uba74\uc758 width, height \ub0b4\uc5d0\uc11c \ud130\uce58\uc774\ubca4\ud2b8 \uc88c\ud45c\uac00 \ubc1c\uc0dd\ud558\uace0, \ud574\ub2f9 \uc88c\ud45c\uacc4 \ub0b4\uc5d0\uc11c \ud654\uba74\uc5d0 \uadf8\ub9ac\ub294 \uc774\ubbf8\uc9c0 \ub0b4\ubd80\uc758 \uadf8 \uc9c0\uc810\uc774 \uc5b4\ub5a4 Point \uc88c\ud45c\uc778\uc9c0 \uc54c\uace0 \uc2f6\ub2e4\uba74 \uc774 \ub450 \uc88c\ud45c\uacc4 \uc0ac\uc774\uc5d0\uc11c\u00a0Matrix\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><a href=\"https:\/\/www.charlezz.com\/?attachment_id=1446\" rel=\"attachment wp-att-1446\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2019\/08\/1_o4xYflPdCVoAlBo0XUsDpQ.png\" alt=\"\" width=\"300\" height=\"477\" class=\"aligncenter size-full wp-image-1446\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2019\/08\/1_o4xYflPdCVoAlBo0XUsDpQ.png 300w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2019\/08\/1_o4xYflPdCVoAlBo0XUsDpQ-189x300.png 189w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>\ud654\uba74\uc5d0 \uadf8\ub824\uc9c4 \uc774\ubbf8\uc9c0 \ub0b4\ubd80\uc758 Point \uc88c\ud45c \uc5bb\uae30 \uc704\ud574\uc11c\ub294 Matrix.mapPoints() \uba54\uc18c\ub4dc\ub97c \uc774\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"lang:java decode:true\">fun mapPoint(point: PointF): PointF {\r\n    computeMatrix.reset()\r\n    \/\/ apply the same transformations on the matrix that are applied to the Image\r\n    computeMatrix.postTranslate(20f, 20f)\r\n    computeMatrix.postRotate(20f, x, y)\r\n    \/\/ create float array with the points we want to map\r\n    val arrayPoint = floatArrayOf(point.x, point.y)\r\n    \/\/ use the map points function to apply the same transformations that the matrix has, onto the input array of coordinates\r\n    computeMatrix.mapPoints(arrayPoint)\r\n    \/\/ get the points out from the array, these will now be    transformed by the matrix.\r\n    return PointF(arrayPoint[0], arrayPoint[1])\r\n}<\/pre>\n<p>\uc704\uc758 \uc608\uc81c\uc5d0\uc11c \uc785\ub825\ud55c \uc9c0\uc810\uc740 Android\uc758 \ud130\uce58\uc774\ubca4\ud2b8\uc774\uba70, computeMatrix\uc5d0 \uc801\uc6a9\ud558\ub294 \ubcc0\ud658 \ubc0f \ud68c\uc804\uc740 \uc774\ubbf8\uc9c0\ub97c \uadf8\ub9b4 \ub54c \uc801\uc6a9\ud55c \ubcc0\ud658 \ubc0f \ud68c\uc804\uacfc \ub3d9\uc77c\ud569\ub2c8\ub2e4. \uc6d0\ub798 x \ubc0f y \uc9c0\uc810\uc744 \ud3ec\ud568\ud558\ub294 float\ubc30\uc5f4\uc744 \ub9cc\ub4e4\uace0, \ub9cc\ub4e4\uc5b4\uc9c4 \ubc30\uc5f4\uacfc \ud568\uaed8 mapPoints \uba54\uc18c\ub4dc\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c \uc801\uc808\ud558\uac8c \ubcc0\ud658\ud558\uace0 \ubc30\uc5f4\uc5d0 \uccab \ubc88\uc9f8 \uac12\uacfc \ub450 \ubc88\uc9f8 \uac12\uc744 \ucffc\ub9ac\ud558\uba74 \ub9e4\ud551\ub41c \uc88c\ud45c(ImageView \ub0b4\ubd80\uc758 Point)\ub97c \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc6d0\ubb38 :\u00a0https:\/\/medium.com\/over-engineering\/android-canvas-drawing-useful-graphics-classes-operations-2803e435e848 \uc548\ub4dc\ub85c\uc774\ub4dc \uce94\ubc84\uc2a4\uc5d0 \ubb54\uac00 \uadf8\ub9ac\ub294\uac74 \uc0c1\ub2f9\ud788 \ud798\ub4e0 \uc791\uc5c5\uc785\ub2c8\ub2e4. \ub9ce\uc740 \ud074\ub798\uc2a4\uc640 \uac1c\ub150\ub4e4\uc774 \ubb54\uac00 \uadf8\ub9b4 \ub54c \uc774\ud574\ub97c \ub3d5\uae30 \uc704\ud574 \uc874\uc7ac \ud569\ub2c8\ub2e4. \ub9cc\uc57d \uc774\uc804 \ud3ec\uc2a4\ud2b8\ub97c \uc77d\uc9c0 \uc54a\uc558\ub2e4\uba74\u001e\uaf2d \uba3c\uc800 \ucc38\uace0\ud574\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4. \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 \uc548\ub4dc\ub85c\uc774\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \ud3ec\ud568\ub418\uc5b4\uc788\uace0 \uce94\ubc84\uc2a4\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc720\uc6a9\ud55c \uba87\uba87 \ud074\ub798\uc2a4\ub4e4\uc5d0 \ub300\ud574\uc11c \uc54c\uc544 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. Rect \/ RectF top, left, right, bottom\u00a0\uc774 4\uac00\uc9c0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[24],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/1443"}],"collection":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1443"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/1443\/revisions"}],"predecessor-version":[{"id":1447,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/1443\/revisions\/1447"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}