矩形區域與圓心區域的碰撞檢測

阿新 • • 發佈：2019-02-19

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var rx1 = 140, ry1 = 100, rx2 = 260, ry2 = 220, cx = 440, cy = 160, cr = 40; var mx = 0, my = 0, qx = 0, qy = 0; var min = Math.min; var max = Math.max; function clamp(v, x, y) { return v < x ? x : v > y ? y : v; } function

dist(x1, y1, x2, y2) { var dx = x1 - x2, dy = y1 - y2; return Math.sqrt(dx * dx + dy * dy); } function p2c(px, py, cx, cy, cr) { return dist(px, py, cx, cy) < cr; } function r2c(rx1, ry1, rx2, ry2, cx, cy, cr) { return dist(clamp(cx, rx1, rx2), clamp(cy, ry1, ry2), cx, cy) < cr; } function

p2r(px, py, rx1, ry1, rx2, ry2) { return px > rx1 && py > ry1 && px < rx2 && py < ry2; } context.strokeCircle = function(x, y, r) { this.beginPath(); this.arc(x, y, r, 0, Math.PI * 2, false); this.closePath(); this.stroke(); } var

hx, hy, hr = 7; // handle data var over = -1, dragging = false; function render() { var time = 0 | new Date(), x, y; updateTime = time + 25; // context.clearRect(0, 0, 640, 320); // if (over >= 0 && dragging) { x = mx - qx; y = my - qy; switch (over) { case 0: cx += x - hx; qx = mx - hx; cy += y - hy; qy = my - hy; break; case 1: cr = max(16, dist(cx, cy, x, y)); break; case 2: rx1 = min(x, rx2 - 16); ry1 = min(y, ry2 - 16); break; case 3: rx2 = max(x, rx1 + 16); ry1 = min(y, ry2 - 16); break; case 4: rx1 = min(x, rx2 - 16); ry2 = max(y, ry1 + 16); break; case 5: rx2 = max(x, rx1 + 16); ry2 = max(y, ry1 + 16); break; case 6: ry1 = min(y, ry2 - 16); break; case 7: ry2 = max(y, ry1 + 16); break; case 8: rx1 = min(x, rx2 - 16); break; case 9: rx2 = max(x, rx1 + 16); break; case 10: rx1 += x - hx; ry1 += y - hy; rx2 += x - hx; ry2 += y - hy; qx = mx - hx; qy = my - hy; break; } } // var co = r2c(rx1, ry1, rx2, ry2, cx, cy, cr); context.strokeStyle = co ? "red" : "blue"; context.strokeCircle(cx, cy, cr); context.strokeCircle(cx, cy, 1); context.strokeRect(rx1, ry1, rx2 - rx1, ry2 - ry1); if (!co) { x = clamp(cx, rx1, rx2); y = clamp(cy, ry1, ry2); context.strokeCircle(x, y, 4); var dx = x - cx; var dy = y - cy; var dd = Math.sqrt(dx * dx + dy * dy); var csx = cx + dx / dd * cr; var csy = cy + dy / dd * cr; context.strokeCircle(csx, csy, 4); // context.beginPath(); context.moveTo(x, y); context.lineTo(csx, csy); context.closePath(); context.stroke(); } // if (over >= 0 && !dragging) { context.strokeStyle = "red"; context.strokeCircle(hx, hy, hr); } } var interval = null; var redraw = false; function update() { if (redraw) { redraw = false; render(); } } function hp(i, x, y, c) { if (p2c(mx, my, x, y, hr)) { hx = x; hy = y; over = i; canvas.style.cursor = c || "move"; return true; } else return false; } function handleMouse(e) { mx = e.offsetX; my = e.offsetY; if (!dragging) { var cdx = mx - cx; var cdy = my - cy; var cd = dist(mx, my, cx, cy); var cex = cx + cdx / cd * cr; var cey = cy + cdy / cd * cr; if (!((cd < cr - hr && hp(0, mx, my)) || hp(1, cex, cey) || hp(2, rx1, ry1, "nw-resize") || hp(3, rx2, ry1, "ne-resize") || hp(4, rx1, ry2, "sw-resize") || hp(5, rx2, ry2, "se-resize") || hp(6, clamp(mx, rx1, rx2), ry1, "n-resize") || hp(7, clamp(mx, rx1, rx2), ry2, "s-resize") || hp(8, rx1, clamp(my, ry1, ry2), "w-resize") || hp(9, rx2, clamp(my, ry1, ry2), "e-resize") || hp(10, clamp(mx, rx1, rx2), clamp(my, ry1, ry2)) )) { canvas.style.cursor = ""; over = -1; } } } canvas.onmousemove = function(e) { handleMouse(e); redraw = true; } canvas.onmousedown = function(e) { e.preventDefault(); handleMouse(e); if (over >= 0) { dragging = true; qx = mx - hx; qy = my - hy; redraw = true; } } canvas.onmouseup = function(e) { handleMouse(e); if (dragging) { dragging = false; over = -1; redraw = true; } } canvas.onmouseover = function(_) { if (interval == null) interval = setInterval(update, 10); } canvas.onmouseout = function(_) { if (interval != null) { clearInterval(interval); interval = null; } } render();

矩形區域與圓心區域的碰撞檢測

矩形區域與圓心區域的碰撞檢測

ASA 防火墻的 inside區域與outside區域

eNSP分析OSPF分析stub區域與普通區域的區別，並驗證stub區域的特性

eNSP環境，分析NSSA區域與Stub區域的區別

Unity中武器與人物的碰撞檢測

OnTriggerEnter與Rigidbody-Unity碰撞檢測

cocos2d-x-3.3-019-碰撞檢測1-矩形區域是否相交

圓與旋轉矩形的碰撞檢測（下篇）

2D遊戲中的碰撞檢測：圓形與矩形碰撞檢測（Javascript&C++版）

Unity 使用物理射線（Physics.Raycast），實現扇形區域碰撞檢測三種方法

深入理解Java虛擬機——java內存區域與內存溢出異常（一）

深入理解JVM之JVM內存區域與內存分配

jvm--內存區域與內存溢出異常

Java內存區域與虛擬機類加載機制

# 大型網絡構建-OSPF詳解二（特殊區域與虛鏈路）

深入理解java虛擬機-java內存區域與內存溢出異常

【深入Java虛擬機（1）】：Java內存區域與內存溢出

學習筆記1:深入理解Java虛擬機器——JVM高階特性與最佳實踐_走進java_java記憶體區域與記憶體溢位異常

【LeetCode 簡單題】75-區域與檢索陣列不可變

java虛擬機器—-java記憶體區域與記憶體溢位異常

矩形區域與圓心區域的碰撞檢測

相關推薦