2c:null 2d:["$","title",null,{"children":"Rounded Corners | fheyen | Observable"}] 32:Ta4b,{ const width = 850; const height = 400; const context = DOM.context2d(width, height); context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.strokeStyle = "black"; context.lineWidth = 1; function drawArc(context, x1, y1, x2, y2, turnLeft = true, roundness = 1) { context.beginPath(); context.moveTo(x1, y1); if (x1 === x2 || y1 === y2) { context.lineTo(x2, y2); context.stroke(); return; } const radius = Math.abs(x2 - x1) * roundness; let cx; let cy; if (turnLeft) { if (x1 < x2 && y1 < y2) { cx = x1 + radius; cy = y2 - radius; context.arc(cx, cy, radius, 1 * Math.PI, 0.5 * Math.PI, true); } else if (x1 > x2 && y1 < y2) { cx = x2 + radius; cy = y1 + radius; context.arc(cx, cy, radius, 1.5 * Math.PI, 1 * Math.PI, true); } else if (x1 > x2 && y1 > y2) { cx = x1 - radius; cy = y2 + radius; context.arc(cx, cy, radius, 0, 1.5 * Math.PI, true); } else { cx = x2 - radius; cy = y1 - radius; context.arc(cx, cy, radius, 0.5 * Math.PI, 0, true); } } else { if (x1 < x2 && y1 < y2) { cx = x2 - radius; cy = y1 + radius; context.arc(cx, cy, radius, 1.5 * Math.PI, 0); } else if (x1 > x2 && y1 < y2) { cx = x1 - radius; cy = y2 - radius; context.arc(cx, cy, radius, 0, 0.5 * Math.PI); } else if (x1 > x2 && y1 > y2) { cx = x2 + radius; cy = y1 - radius; context.arc(cx, cy, radius, 0.5 * Math.PI, 1 * Math.PI, false); } else { cx = x1 + radius; cy = y2 + radius; context.arc(cx, cy, radius, Math.PI, 1.5 * Math.PI, false); } } context.lineTo(x2, y2); context.stroke(); context.fillStyle = "red"; context.fillRect(cx - 1, cy - 1, 3, 3); context.fillStyle = "green"; context.fillRect(x1 - 1, y1 - 1, 3, 3); } // Test const test = d3 .cross([-1, 1], [-1, 1], [true, false]) .map(([dx, dy, turnLeft], i) => { const x = turnLeft ? (i + 1) * 100 : i * 100; const y = turnLeft ? 100 : 300; return { x1: x, y1: y, x2: x + dx * 50, y2: y + dy * 50, turnLeft, text: "dx " + dx + " dy " + dy + " turnLeft " + turnLeft }; }); for (const { x1, x2, y1, y2, turnLeft, text } of test) { context.fillStyle = "#333"; context.font = "10px sans-serif"; context.fillText(text, x1, y1 - 60); drawArc(context, x1, y1, x2, y2, turnLeft, roundness); } return context.canvas; }33:T5db,function drawArc(context, x1, y1, x2, y2, turnLeft = true, roundness = 1) { context.beginPath(); context.moveTo(x1, y1); if (x1 === x2 || y1 === y2) { context.lineTo(x2, y2); context.stroke(); return; } const radius = Math.abs(x2 - x1) * roundness; let cx; let cy; if (turnLeft) { if (x1 < x2 && y1 < y2) { cx = x1 + radius; cy = y2 - radius; context.arc(cx, cy, radius, 1 * Math.PI, 0.5 * Math.PI, true); } else if (x1 > x2 && y1 < y2) { cx = x2 + radius; cy = y1 + radius; context.arc(cx, cy, radius, 1.5 * Math.PI, 1 * Math.PI, true); } else if (x1 > x2 && y1 > y2) { cx = x1 - radius; cy = y2 + radius; context.arc(cx, cy, radius, 0, 1.5 * Math.PI, true); } else { cx = x2 - radius; cy = y1 - radius; context.arc(cx, cy, radius, 0.5 * Math.PI, 0, true); } } else { if (x1 < x2 && y1 < y2) { cx = x2 - radius; cy = y1 + radius; context.arc(cx, cy, radius, 1.5 * Math.PI, 0); } else if (x1 > x2 && y1 < y2) { cx = x1 - radius; cy = y2 - radius; context.arc(cx, cy, radius, 0, 0.5 * Math.PI); } else if (x1 > x2 && y1 > y2) { cx = x2 + radius; cy = y1 - radius; context.arc(cx, cy, radius, 0.5 * Math.PI, 1 * Math.PI, false); } else { cx = x1 + radius; cy = y2 + radius; context.arc(cx, cy, radius, Math.PI, 1.5 * Math.PI, false); } } context.lineTo(x2, y2); context.stroke(); }34:[] 30:{"id":"36fe2074970e2551","slug":"rounded-corners","title":"Rounded Corners","thumbnail":"7437dc71270776267ba62764740a921fcc9f5e609c17ad21d28aa9285685a598","access_level":"public","create_time":"$D2021-10-09T16:02:20.983Z","update_time":"$D2021-10-09T16:03:10.274Z","view_time":null,"first_public_time":"$D2021-10-09T16:03:29.270Z","has_unpublished_edits":null,"fork":{"id":"ec056d017150a416","slug":"random-walks-5","title":"Random Walks 5","owner":{"id":"5cbdc37d5634c888","login":"fheyen","name":""}},"stars":2,"starred":false,"owner":{"type":"team","id":"5cbdc37d5634c888","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":"starter_2024"},"version":471,"publish_version":471,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce539535bc3f40fc","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":null}],"members":[{"type":"individual","id":"ce539535bc3f40fc","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rounded Corners","cells":[{"id":0,"value":"# Rounded Corners\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"viewof roundness = Inputs.range([0, 1], { label: \"Roundness\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"