{"id":357,"date":"2014-12-28T17:11:43","date_gmt":"2014-12-28T09:11:43","guid":{"rendered":"http:\/\/www.hightopo.com\/blog\/?p=357"},"modified":"2014-12-28T17:11:43","modified_gmt":"2014-12-28T09:11:43","slug":"html5%e7%89%88%e7%9a%84string-avoider%e5%b0%8f%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"https:\/\/www.hightopo.com\/blog\/357.html","title":{"rendered":"HTML5\u7248\u7684String Avoider\u5c0f\u6e38\u620f"},"content":{"rendered":"<p>HTML5\u7248\u7684String Avoider\u5c0f\u6e38\u620f\u00a0<a href=\"http:\/\/www.newgrounds.com\/portal\/view\/300760\">http:\/\/www.newgrounds.com\/portal\/view\/300760<\/a>\u00a0\u86ee\u7b80\u5355\u4e5f\u86ee\u8003\u9a8c\u8010\u5fc3\uff0c\u4ece\u6e38\u620f\u8d77\u59cb\u70b9\u79fb\u52a8\u9f20\u6807\u5230\u7ec8\u70b9\u4f4d\u7f6e\uff0c\u9f20\u6807\u79fb\u52a8\u8fc7\u7a0b\u7ed8\u5236\u51fa\u79fb\u52a8\u8f68\u8ff9\u7684String\u5e73\u6ed1\u66f2\u7ebf\uff0c\u6574\u4e2a\u8fc7\u7a0b\u4e0d\u80fd\u78b0\u649e\u5230\u8fb9\u754c\uff0c\u4ece\u6280\u672f\u89d2\u5ea6\u6765\u8bf4\u5176\u6838\u5fc3\u5c31\u662f\u6839\u636e\u9f20\u6807\u79fb\u52a8\u4f4d\u7f6e\u751f\u6210String\u7ebf\u7684\u7b97\u6cd5\uff0c\u8be5\u6e38\u620f\u662fActionScript\u5199\u7684Flash\u7248\uff0c\u8fd9\u91cc\u5c06\u5176\u6539\u9020\u6210HTML5\u7248\u7684JavaScript\u5b9e\u73b0\uff0c\u5e76\u589e\u52a0\u53ef\u81ea\u5b9a\u4e49\u5173\u5361\u529f\u80fd\u7684\u4e00\u79cd\u8bbe\u8ba1\u601d\u8def\u3002<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-360\" alt=\"Screen Shot 2014-12-28 at 3.39.34 PM\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM.png\" width=\"748\" height=\"565\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM.png 748w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM-300x226.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM-200x151.png 200w\" sizes=\"(max-width: 748px) 100vw, 748px\" \/><\/a><\/p>\n<p>String\u8fde\u7ebf\u6211\u662f\u7f13\u5b58\u4e86300\u4e2a\u70b9\u4fe1\u606f\u7684\u6570\u7ec4\uff0c\u9f20\u6807\u79fb\u52a8\u65f6\u4e0d\u65ad\u8c03\u6574300\u4e2a\u70b9\u7684\u65b0\u4f4d\u7f6e\u4fe1\u606f\uff0c\u6bcf\u6b21\u66f4\u65b0\u65f6\u5148\u5c06\u65b0\u9f20\u6807\u70b9\u8bbe\u7f6e\u7ed9\u7b2c\u4e00\u4e2a\u5143\u7d20\uff0c\u540e\u7eed\u66f4\u65b0x\u70b9\u65f6\uff0c\u8ba1\u7b97\u5176\u4e0ex-1\u70b9\u7684\u89d2\u5ea6\uff0c\u5728\u6b64\u65b9\u5411\u957f\u5ea6\u4e3a1\u7684\u4f4d\u7f6e\u66f4\u65b0\u5750\u6807\uff0c\u8fd9\u6837\u5c31\u8fbe\u5230\u4e86\u5e73\u6ed1\u66f2\u7ebf\u7684\u6548\u679c\u3002<\/p>\n<p>\u9664\u4e86\u7ed8\u5236String\u7ebf\u5916\u8fd8\u6709\u4e2a\u6280\u672f\u70b9\u5c31\u662f\u76d1\u6d4b\u78b0\u649e\uff0c\u8be5Flash\u6e38\u620f\u7684\u8fb9\u754c\u90fd\u662f\u7ebf\u6bb5\uff0c\u56e0\u6b64\u7b2c\u4e00\u60f3\u5230\u7684\u76d1\u6d4b\u65b9\u5f0f\u5c31\u662f\u7ebf\u7ebf\u76f8\u4ea4\u7684\u601d\u8def\uff0c\u7b97\u6cd5\u53ef\u53c2\u8003\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Line%E2%80%93line_intersection\">http:\/\/en.wikipedia.org\/wiki\/Line%E2%80%93line_intersection<\/a>\u00a0\uff0c\u5982\u679c\u4ee5LineLine\u7684\u76f8\u4ea4\u601d\u8def\u53ea\u9700\u8981\u904d\u5386\u6240\u6709point\u95f4\u7684\u7ebf\u6bb5\uff0c\u5224\u65ad\u662f\u5426\u4e0e\u6e38\u620f\u5173\u5361\u5b9a\u4e49\u7684\u8fb9\u754c\u7ebf\u76f8\u4ea4\uff0c\u4f46\u8fd9\u79cd\u65b9\u5f0f\u5bf9\u4e0d\u89c4\u5219\u8fb9\u754c\u5c31\u6bd4\u8f83\u9ebb\u70e6\uff0c\u76d1\u6d4b\u6027\u80fd\u4e5f\u4e0d\u9ad8\u3002<\/p>\n<p>\u8003\u8651\u5230\u6211\u4eec\u8fd8\u9700\u8981\u63d0\u4f9b\u7528\u6237\u53efDIY\u81ea\u5b9a\u4e49\u6e38\u620f\u5173\u5361\u7684\u529f\u80fd\uff0c\u6211\u4eec\u5c06\u91c7\u7528\u76d1\u6d4b\u989c\u8272\u900f\u660e\u5ea6\u4fe1\u606f\u7684\u65b9\u5f0f\uff0c\u7531\u4e8e\u6b63\u5e38\u6e38\u620f\u65f6\u573a\u666f\u65e0\u9700\u7528\u6237\u52a8\u6001\u4fee\u6539\uff0c\u56e0\u6b64\u8fb9\u754c\u7684\u4fe1\u606f\u53ef\u63d0\u524d\u7f13\u5b58\u5230ImageData\u5185\u5b58\u4e2d\uff0c\u5e76\u4e14\u6211\u4eec300\u4e2a\u70b9\u7684\u8ddd\u79bb\u90fd\u662f1\uff0c\u76d1\u6d4b\u53ea\u9700\u6839\u636e\u70b9\u8fdb\u884c\u5c31\u53ef\u4ee5\u3002<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-361\" alt=\"Screen Shot 2014-12-28 at 3.38.33 PM\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM.png\" width=\"622\" height=\"460\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM.png 622w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM-300x221.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM-200x147.png 200w\" sizes=\"(max-width: 622px) 100vw, 622px\" \/><\/a><\/p>\n<p>\u6574\u4e2a\u7a0b\u5e8f\u91c7\u7528<a href=\"http:\/\/www.hightopo.com\/\">HT for Web<\/a>\u7684<a href=\"http:\/\/www.hightopo.com\/\">GraphView<\/a>\u62d3\u6251\u56fe\u7ec4\u4ef6\uff0c\u518d\u5176\u4e0a\u901a\u8fc7addTopPainter\u6dfb\u52a0\u9876\u5c42\u753b\u7b14\u7ed8\u5236\u66f2\u7ebf\uff0c\u5f53\u66f2\u7ebf\u78b0\u5230Node\u56fe\u5143\u65f6\u7ed8\u5236\u6210\u7ea2\u8272\uff0c\u5426\u5219\u7ed8\u5236\u6210\u9ec4\u8272\uff0c\u76d1\u542c<a href=\"http:\/\/www.hightopo.com\/\">GraphView<\/a>\u62d3\u6251\u56fe\u7684interaction\u4e8b\u4ef6\uff0c\u5728\u8be5\u4e8b\u4ef6\u4e2d\u8bbe\u7f6edirty\u7684\u810f\u6807\u5fd7\uff0c\u5728\u7ed8\u5236\u65f6\u6839\u636edirty\u7684\u6807\u5fd7\u8fdb\u884c\u66f4\u65b0\uff0c\u91c7\u7528\u8fd9\u6837\u7684\u65b9\u5f0f\u53ef\u5c06\u591a\u6b21\u53d8\u6362\u6700\u7ec8\u805a\u5408\u6210\u4e00\u6b21\u66f4\u65b0\uff0c\u8fd9\u4e5f\u662f\u56fe\u5f62\u5237\u65b0\u7ed8\u5236\u5e38\u7528\u7684\u57fa\u672c\u6280\u5de7\u3002\u540c\u65f6\u901a\u8fc7GraphView.setEditable(true)\u5f00\u542f\u4e86\u62d3\u6251\u56fe\u7684\u53ef\u89c6\u5316\u7f16\u8f91\u529f\u80fd\uff0c\u7528\u6237\u53ef\u968f\u65f6\u6539\u53d8\u754c\u9762\u56fe\u5143\u4f4d\u7f6e\u548c\u65cb\u8f6c\u7b49\u5f62\u72b6\u4fe1\u606f\uff0c\u76f8\u5f53\u4e8e\u81ea\u5b9a\u4e49\u5173\u5361\u7684\u6548\u679c\u3002<br \/>\n<iframe loading=\"lazy\" src=\"http:\/\/player.youku.com\/embed\/XODU4NzY5MzQ0\" height=\"498\" width=\"510\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/p>\n<p>\u6240\u6709\u4ee3\u7801\u548c\u8fd0\u884c\u6548\u679c\u5982\u4e0b\uff1a<a href=\"http:\/\/v.youku.com\/v_show\/id_XODU4NzY5MzQ0.html\">http:\/\/v.youku.com\/v_show\/id_XODU4NzY5MzQ0.html<\/a><\/p>\n<pre class=\"&quot;brush:javascript\u201d\">function init(){                    \r\n\tdataModel = new ht.DataModel();                   \r\n\tgraphView = new ht.graph.GraphView(dataModel); \r\n\tgraphView.handleScroll = function(){};\r\n\tgraphView.setEditable(true);\r\n\tgraphView.setPannable(false)\r\n\r\n\tview = graphView.getView();\r\n\tview.style.left = '10px';\r\n\tview.style.top = '10px';\r\n\tview.style.width = '600px';\r\n\tview.style.height = '400px';\r\n\tview.style.background = 'black';\r\n\tdocument.body.appendChild(view);\r\n\r\n\tcreateNode(20, 20, 80, 40, 'rect');                \r\n\tcreateNode(200, 300, 80, 40, 'star');\r\n\tcreateNode(400, 100, 80, 40, 'oval');\r\n\tcreateShape();\r\n\r\n\tlength = 1;\r\n\tcount = 300;\r\n\tpoints = [];\r\n\tfor(var i=0; i&lt;count; i++){\r\n\t\tpoints.push({x: 0, y: 0});\r\n\t}\r\n\tview.addEventListener('mousemove', function(e){\r\n\t\tvar point = graphView.lp(e);\r\n\t\tpoints[0].x = point.x;\r\n\t\tpoints[0].y = point.y;\r\n\t\tfor (var i = 1; i &lt; count - 1; i++) {\r\n\t\t\tvar angle = Math.atan2(points[i].y - points[i - 1].y, points[i].x - points[i - 1].x);\r\n\t\t\tpoints[i].x = points[i - 1].x + length * Math.cos(angle);\r\n\t\t\tpoints[i].y = points[i - 1].y + length * Math.sin(angle);\r\n\t\t}\r\n\t\tif(imageData){\r\n\t\t\thit = false;\r\n\t\t\tfor (var i = 0; i &lt; count; i++) {\r\n\t\t\t\tvar x = Math.floor(points[i].x);\r\n\t\t\t\tvar y = Math.floor(points[i].y);\r\n\t\t\t\tvar index = (y * graphView.getWidth() + x) * 4;\r\n\t\t\t\tif(imageData.data[index+3] !== 0){\r\n\t\t\t\t\thit = true;\r\n\t\t\t\t\tbreak;\r\n\t\t\t\t}\r\n\t\t\t}                        \r\n\t\t}                    \r\n\t\tgraphView.redraw();\r\n\t});\r\n\r\n\tdirty = true;                \r\n\timageData = null;\r\n\tgraphView.mi(function(e){\r\n\t\tdirty = true;\r\n\t});                \r\n\tgraphView.addTopPainter(function(g){\r\n\t\tif(dirty){\r\n\t\t\tdirty = false;    \r\n\t\t\thit = false;\r\n\t\t\timageData = g.getImageData(0, 0, graphView.getWidth(), graphView.getHeight());                                                                                                                                              \r\n\t\t\tht.Default.callLater(graphView.redraw, graphView);  \r\n\t\t}else{\r\n\t\t\tg.beginPath();\r\n\t\t\tg.lineWidth = 3;\r\n\t\t\tg.strokeStyle = hit ? 'red' : 'yellow';                   \r\n\t\t\tg.moveTo(points[0].x, points[0].y);\r\n\t\t\tfor (var i = 1; i &lt; count - 1; i++) {\r\n\t\t\t\tg.lineTo(points[i].x, points[i].y);\r\n\t\t\t}\r\n\t\t\tg.stroke();                        \r\n\t\t}\r\n\t});\r\n}    \r\nfunction createNode(x, y, w, h, shape){\r\n\tvar node = new ht.Node();\r\n\tnode.setRect(x, y, w, h);\r\n\tnode.s({\r\n\t\t'shape': shape,\r\n\t\t'select.width': 0\r\n\t});\r\n\tdataModel.add(node);\r\n\treturn node;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>HTML5\u7248\u7684String Avoider\u5c0f\u6e38\u620f\u00a0<a href=\"http:\/\/www.newgrounds.com\/portal\/view\/300760\">http:\/\/www.newgrounds.com\/portal\/view\/300760<\/a>\u00a0\u86ee\u7b80\u5355\u4e5f\u86ee\u8003\u9a8c\u8010\u5fc3\uff0c\u4ece\u6e38\u620f\u8d77\u59cb\u70b9\u79fb\u52a8\u9f20\u6807\u5230\u7ec8\u70b9\u4f4d\u7f6e\uff0c\u9f20\u6807\u79fb\u52a8\u8fc7\u7a0b\u7ed8\u5236\u51fa\u79fb\u52a8\u8f68\u8ff9\u7684String\u5e73\u6ed1\u66f2\u7ebf\uff0c\u6574\u4e2a\u8fc7\u7a0b\u4e0d\u80fd\u78b0\u649e\u5230\u8fb9\u754c\uff0c\u4ece\u6280\u672f\u89d2\u5ea6\u6765\u8bf4\u5176\u6838\u5fc3\u5c31\u662f\u6839\u636e\u9f20\u6807\u79fb\u52a8\u4f4d\u7f6e\u751f\u6210String\u7ebf\u7684\u7b97\u6cd5\uff0c\u8be5\u6e38\u620f\u662fActionScript\u5199\u7684Flash\u7248\uff0c\u8fd9\u91cc\u5c06\u5176\u6539\u9020\u6210HTML5\u7248\u7684JavaScript\u5b9e\u73b0\uff0c\u5e76\u589e\u52a0\u53ef\u81ea\u5b9a\u4e49\u5173\u5361\u529f\u80fd\u7684\u4e00\u79cd\u8bbe\u8ba1\u601d\u8def\u3002<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-360\" alt=\"Screen Shot 2014-12-28 at 3.39.34 PM\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM.png\" width=\"748\" height=\"565\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM.png 748w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM-300x226.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.39.34-PM-200x151.png 200w\" sizes=\"(max-width: 748px) 100vw, 748px\" \/><\/a><\/p>\n<p>String\u8fde\u7ebf\u6211\u662f\u7f13\u5b58\u4e86300\u4e2a\u70b9\u4fe1\u606f\u7684\u6570\u7ec4\uff0c\u9f20\u6807\u79fb\u52a8\u65f6\u4e0d\u65ad\u8c03\u6574300\u4e2a\u70b9\u7684\u65b0\u4f4d\u7f6e\u4fe1\u606f\uff0c\u6bcf\u6b21\u66f4\u65b0\u65f6\u5148\u5c06\u65b0\u9f20\u6807\u70b9\u8bbe\u7f6e\u7ed9\u7b2c\u4e00\u4e2a\u5143\u7d20\uff0c\u540e\u7eed\u66f4\u65b0x\u70b9\u65f6\uff0c\u8ba1\u7b97\u5176\u4e0ex-1\u70b9\u7684\u89d2\u5ea6\uff0c\u5728\u6b64\u65b9\u5411\u957f\u5ea6\u4e3a1\u7684\u4f4d\u7f6e\u66f4\u65b0\u5750\u6807\uff0c\u8fd9\u6837\u5c31\u8fbe\u5230\u4e86\u5e73\u6ed1\u66f2\u7ebf\u7684\u6548\u679c\u3002<\/p>\n<p>\u9664\u4e86\u7ed8\u5236String\u7ebf\u5916\u8fd8\u6709\u4e2a\u6280\u672f\u70b9\u5c31\u662f\u76d1\u6d4b\u78b0\u649e\uff0c\u8be5Flash\u6e38\u620f\u7684\u8fb9\u754c\u90fd\u662f\u7ebf\u6bb5\uff0c\u56e0\u6b64\u7b2c\u4e00\u60f3\u5230\u7684\u76d1\u6d4b\u65b9\u5f0f\u5c31\u662f\u7ebf\u7ebf\u76f8\u4ea4\u7684\u601d\u8def\uff0c\u7b97\u6cd5\u53ef\u53c2\u8003\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Line%E2%80%93line_intersection\">http:\/\/en.wikipedia.org\/wiki\/Line%E2%80%93line_intersection<\/a>\u00a0\uff0c\u5982\u679c\u4ee5LineLine\u7684\u76f8\u4ea4\u601d\u8def\u53ea\u9700\u8981\u904d\u5386\u6240\u6709point\u95f4\u7684\u7ebf\u6bb5\uff0c\u5224\u65ad\u662f\u5426\u4e0e\u6e38\u620f\u5173\u5361\u5b9a\u4e49\u7684\u8fb9\u754c\u7ebf\u76f8\u4ea4\uff0c\u4f46\u8fd9\u79cd\u65b9\u5f0f\u5bf9\u4e0d\u89c4\u5219\u8fb9\u754c\u5c31\u6bd4\u8f83\u9ebb\u70e6\uff0c\u76d1\u6d4b\u6027\u80fd\u4e5f\u4e0d\u9ad8\u3002<\/p>\n<p>\u8003\u8651\u5230\u6211\u4eec\u8fd8\u9700\u8981\u63d0\u4f9b\u7528\u6237\u53efDIY\u81ea\u5b9a\u4e49\u6e38\u620f\u5173\u5361\u7684\u529f\u80fd\uff0c\u6211\u4eec\u5c06\u91c7\u7528\u76d1\u6d4b\u989c\u8272\u900f\u660e\u5ea6\u4fe1\u606f\u7684\u65b9\u5f0f\uff0c\u7531\u4e8e\u6b63\u5e38\u6e38\u620f\u65f6\u573a\u666f\u65e0\u9700\u7528\u6237\u52a8\u6001\u4fee\u6539\uff0c\u56e0\u6b64\u8fb9\u754c\u7684\u4fe1\u606f\u53ef\u63d0\u524d\u7f13\u5b58\u5230ImageData\u5185\u5b58\u4e2d\uff0c\u5e76\u4e14\u6211\u4eec300\u4e2a\u70b9\u7684\u8ddd\u79bb\u90fd\u662f1\uff0c\u76d1\u6d4b\u53ea\u9700\u6839\u636e\u70b9\u8fdb\u884c\u5c31\u53ef\u4ee5\u3002<\/p>\n<p><a href=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-361\" alt=\"Screen Shot 2014-12-28 at 3.38.33 PM\" src=\"http:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM.png\" width=\"622\" height=\"460\" srcset=\"https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM.png 622w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM-300x221.png 300w, https:\/\/www.hightopo.com\/blog\/wp-content\/uploads\/2014\/12\/Screen-Shot-2014-12-28-at-3.38.33-PM-200x147.png 200w\" sizes=\"(max-width: 622px) 100vw, 622px\" \/><\/a><\/p>\n<p>\u6574\u4e2a\u7a0b\u5e8f\u91c7\u7528<a href=\"http:\/\/www.hightopo.com\/\">HT for Web<\/a>\u7684<a href=\"http:\/\/www.hightopo.com\/\">GraphView<\/a>\u62d3\u6251\u56fe\u7ec4\u4ef6\uff0c\u518d\u5176\u4e0a\u901a\u8fc7addTopPainter\u6dfb\u52a0\u9876\u5c42\u753b\u7b14\u7ed8\u5236\u66f2\u7ebf\uff0c\u5f53\u66f2\u7ebf\u78b0\u5230Node\u56fe\u5143\u65f6\u7ed8\u5236\u6210\u7ea2\u8272\uff0c\u5426\u5219\u7ed8\u5236\u6210\u9ec4\u8272\uff0c\u76d1\u542c<a href=\"http:\/\/www.hightopo.com\/\">GraphView<\/a>\u62d3\u6251\u56fe\u7684interaction\u4e8b\u4ef6\uff0c\u5728\u8be5\u4e8b\u4ef6\u4e2d\u8bbe\u7f6edirty\u7684\u810f\u6807\u5fd7\uff0c\u5728\u7ed8\u5236\u65f6\u6839\u636edirty\u7684\u6807\u5fd7\u8fdb\u884c\u66f4\u65b0\uff0c\u91c7\u7528\u8fd9\u6837\u7684\u65b9\u5f0f\u53ef\u5c06\u591a\u6b21\u53d8\u6362\u6700\u7ec8\u805a\u5408\u6210\u4e00\u6b21\u66f4\u65b0\uff0c\u8fd9\u4e5f\u662f\u56fe\u5f62\u5237\u65b0\u7ed8\u5236\u5e38\u7528\u7684\u57fa\u672c\u6280\u5de7\u3002\u540c\u65f6\u901a\u8fc7GraphView.setEditable(true)\u5f00\u542f\u4e86\u62d3\u6251\u56fe\u7684\u53ef\u89c6\u5316\u7f16\u8f91\u529f\u80fd\uff0c\u7528\u6237\u53ef\u968f\u65f6\u6539\u53d8\u754c\u9762\u56fe\u5143\u4f4d\u7f6e\u548c\u65cb\u8f6c\u7b49\u5f62\u72b6\u4fe1\u606f\uff0c\u76f8\u5f53\u4e8e\u81ea\u5b9a\u4e49\u5173\u5361\u7684\u6548\u679c\u3002<br \/>\n<iframe loading=\"lazy\" src=\"http:\/\/player.youku.com\/embed\/XODU4NzY5MzQ0\" height=\"498\" width=\"510\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/p>\n<p>\u6240\u6709\u4ee3\u7801\u548c\u8fd0\u884c\u6548\u679c\u5982\u4e0b\uff1a<a href=\"http:\/\/v.youku.com\/v_show\/id_XODU4NzY5MzQ0.html\">http:\/\/v.youku.com\/v_show\/id_XODU4NzY5MzQ0.html<\/a><\/p>\n<pre class=\"&quot;brush:javascript\u201d\">function init(){                    \r\n\tdataModel = new ht.DataModel();                   \r\n\tgraphView = new ht.graph.GraphView(dataModel); \r\n\tgraphView.handleScroll = function(){};\r\n\tgraphView.setEditable(true);\r\n\tgraphView.setPannable(false)\r\n\r\n\tview = graphView.getView();\r\n\tview.style.left = '10px';\r\n\tview.style.top = '10px';\r\n\tview.style.width = '600px';\r\n\tview.style.height = '400px';\r\n\tview.style.background = 'black';\r\n\tdocument.body.appendChild(view);\r\n\r\n\tcreateNode(20, 20, 80, 40, 'rect');                \r\n\tcreateNode(200, 300, 80, 40, 'star');\r\n\tcreateNode(400, 100, 80, 40, 'oval');\r\n\tcreateShape();\r\n\r\n\tlength = 1;\r\n\tcount = 300;\r\n\tpoints = [];\r\n\tfor(var i=0; i&lt;count; i++){\r\n\t\tpoints.push({x: 0, y: 0});\r\n\t}\r\n\tview.addEventListener('mousemove', function(e){\r\n\t\tvar point = graphView.lp(e);\r\n\t\tpoints[0].x = point.x;\r\n\t\tpoints[0].y = point.y;\r\n\t\tfor (var i = 1; i &lt; count - 1; i++) {\r\n\t\t\tvar angle = Math.atan2(points[i].y - points[i - 1].y, points[i].x - points[i - 1].x);\r\n\t\t\tpoints[i].x = points[i - 1].x + length * Math.cos(angle);\r\n\t\t\tpoints[i].y = points[i - 1].y + length * Math.sin(angle);\r\n\t\t}\r\n\t\tif(imageData){\r\n\t\t\thit = false;\r\n\t\t\tfor (var i = 0; i &lt; count; i++) {\r\n\t\t\t\tvar x = Math.floor(points[i].x);\r\n\t\t\t\tvar y = Math.floor(points[i].y);\r\n\t\t\t\tvar index = (y * graphView.getWidth() + x) * 4;\r\n\t\t\t\tif(imageData.data[index+3] !== 0){\r\n\t\t\t\t\thit = true;\r\n\t\t\t\t\tbreak;\r\n\t\t\t\t}\r\n\t\t\t}                        \r\n\t\t}                    \r\n\t\tgraphView.redraw();\r\n\t});\r\n\r\n\tdirty = true;                \r\n\timageData = null;\r\n\tgraphView.mi(function(e){\r\n\t\tdirty = true;\r\n\t});                \r\n\tgraphView.addTopPainter(function(g){\r\n\t\tif(dirty){\r\n\t\t\tdirty = false;    \r\n\t\t\thit = false;\r\n\t\t\timageData = g.getImageData(0, 0, graphView.getWidth(), graphView.getHeight());                                                                                                                                              \r\n\t\t\tht.Default.callLater(graphView.redraw, graphView);  \r\n\t\t}else{\r\n\t\t\tg.beginPath();\r\n\t\t\tg.lineWidth = 3;\r\n\t\t\tg.strokeStyle = hit ? 'red' : 'yellow';                   \r\n\t\t\tg.moveTo(points[0].x, points[0].y);\r\n\t\t\tfor (var i = 1; i &lt; count - 1; i++) {\r\n\t\t\t\tg.lineTo(points[i].x, points[i].y);\r\n\t\t\t}\r\n\t\t\tg.stroke();                        \r\n\t\t}\r\n\t});\r\n}    \r\nfunction createNode(x, y, w, h, shape){\r\n\tvar node = new ht.Node();\r\n\tnode.setRect(x, y, w, h);\r\n\tnode.s({\r\n\t\t'shape': shape,\r\n\t\t'select.width': 0\r\n\t});\r\n\tdataModel.add(node);\r\n\treturn node;\r\n}<\/pre>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/357"}],"collection":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/comments?post=357"}],"version-history":[{"count":2,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/357\/revisions"}],"predecessor-version":[{"id":362,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/posts\/357\/revisions\/362"}],"wp:attachment":[{"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/media?parent=357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/categories?post=357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hightopo.com\/blog\/wp-json\/wp\/v2\/tags?post=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}