Ich muss eine 'unendliche' Canvas mit umrandeten Textfeldern erstellen.HTML unendliche Pan-Canvas Canvas
Wie diese am Desmos Website:
https://www.desmos.com/calculator
Ich habe mich nicht geschafft, es zu implementieren.
Frage
Könnte jemand mir dabei helfen?
Der einfachste Ansatz für eine pan-Canvas ist es, alles relativ zu einem Offset zu zeichnen, in diesem Beispiel habe ich diese panX & panY genannt. Stellen Sie sich dies als eine Koordinate vor, die Sie verwenden, um das Ansichtsfenster zu verschieben (den Bereich der unendlichen Karte, der derzeit in der Zeichenfläche sichtbar ist).
<!doctype html>
<html>
\t <head>
\t \t <meta charset="utf-8">
\t \t <style>
\t \t \t body {
\t \t \t \t background-color: black;
\t \t \t }
\t \t \t
\t \t \t canvas {
\t \t \t \t position: absolute;
\t \t \t \t margin-left: auto;
\t \t \t \t margin-right: auto;
\t \t \t \t left: 0;
\t \t \t \t right: 0;
\t \t \t \t border: solid 1px white;
\t \t \t \t border-radius: 10px;
\t \t \t }
\t \t </style>
\t </head>
\t
\t <body>
\t \t <canvas id="canvas"></canvas>
\t \t <script type="application/javascript">
\t \t \t
\t \t \t var imageWidth = 180;
\t \t \t var imageHeight = 160;
\t \t \t var canvas = null;
\t \t \t var ctx = null;
\t \t \t var bounds = null;
\t \t \t var selectedBox = null;
\t \t \t var panX = 0;
\t \t \t var panY = 0;
\t \t \t var mouseX = 0;
\t \t \t var mouseY = 0;
\t \t \t var oldMouseX = 0;
\t \t \t var oldMouseY = 0;
\t \t \t var mouseHeld = false;
\t \t \t var boxArray = [];
\t \t \t
\t \t \t function DraggableBox(x,y,width,height,text) {
\t \t \t \t this.x = x;
\t \t \t \t this.y = y;
\t \t \t \t this.width = width;
\t \t \t \t this.height = height;
\t \t \t \t this.text = text;
\t \t \t \t this.isSelected = false;
\t \t \t }
\t \t \t
\t \t \t DraggableBox.prototype.isCollidingWidthPoint = function(x,y) {
\t \t \t \t return (x > this.x && x < this.x + this.width)
\t \t \t \t \t && (y > this.y && y < this.y + this.height);
\t \t \t }
\t \t \t
\t \t \t DraggableBox.prototype.drag = function(newX,newY) {
\t \t \t \t this.x = newX - this.width * 0.5;
\t \t \t \t this.y = newY - this.height * 0.5;
\t \t \t }
\t \t \t
\t \t \t DraggableBox.prototype.draw = function() {
\t \t \t \t if (this.isSelected) {
\t \t \t \t \t ctx.fillStyle = "darkcyan";
\t \t \t \t \t ctx.fillRect(
\t \t \t \t \t \t this.x - panX,
\t \t \t \t \t \t this.y - panY,
\t \t \t \t \t \t this.width,
\t \t \t \t \t \t this.height
\t \t \t \t \t);
\t \t \t \t \t ctx.fillStyle = "black";
\t \t \t \t } else { \t \t \t
\t \t \t \t \t ctx.fillRect(
\t \t \t \t \t \t this.x - panX,
\t \t \t \t \t \t this.y - panY,
\t \t \t \t \t \t this.width,
\t \t \t \t \t \t this.height
\t \t \t \t \t);
\t \t \t \t }
\t \t \t \t
\t \t \t \t ctx.fillStyle = "white";
\t \t \t \t ctx.fillText(
\t \t \t \t \t this.text,
\t \t \t \t \t this.x + this.width * 0.5 - panX,
\t \t \t \t \t this.y + this.height * 0.5 - panY,
\t \t \t \t \t this.width
\t \t \t \t);
\t \t \t \t ctx.fillStyle = "black";
\t \t \t }
\t \t \t
\t \t \t window.onmousedown = function(e) {
\t \t \t \t mouseHeld = true;
\t \t \t
\t \t \t \t if (!selectedBox) {
\t \t \t \t \t for (var i = boxArray.length - 1; i > -1; --i) {
\t \t \t \t \t \t if (boxArray[i].isCollidingWidthPoint(mouseX + panX,mouseY + panY)) {
\t \t \t \t \t \t \t selectedBox = boxArray[i];
\t \t \t \t \t \t \t selectedBox.isSelected = true;
\t \t \t \t \t \t \t requestAnimationFrame(draw);
\t \t \t \t \t \t \t return;
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t \t
\t \t \t window.onmousemove = function(e) {
\t \t \t \t mouseX = e.clientX - bounds.left;
\t \t \t \t mouseY = e.clientY - bounds.top;
\t \t \t \t
\t \t \t \t if (mouseHeld) {
\t \t \t \t \t if (!selectedBox) {
\t \t \t \t \t \t panX += oldMouseX - mouseX;
\t \t \t \t \t \t panY += oldMouseY - mouseY;
\t \t \t \t \t } else {
\t \t \t \t \t \t selectedBox.x = mouseX - selectedBox.width * 0.5 + panX;
\t \t \t \t \t \t selectedBox.y = mouseY - selectedBox.height * 0.5 + panY;
\t \t \t \t \t }
\t \t \t \t }
\t \t \t \t
\t \t \t \t oldMouseX = mouseX;
\t \t \t \t oldMouseY = mouseY;
\t \t \t \t
\t \t \t \t requestAnimationFrame(draw);
\t \t \t }
\t \t \t
\t \t \t window.onmouseup = function(e) {
\t \t \t \t mouseHeld = false;
\t \t \t \t
\t \t \t \t if (selectedBox) {
\t \t \t \t \t selectedBox.isSelected = false;
\t \t \t \t \t selectedBox = null;
\t \t \t \t \t requestAnimationFrame(draw);
\t \t \t \t }
\t \t \t }
\t \t \t
\t \t \t function draw() {
\t \t \t \t ctx.fillStyle = "gray";
\t \t \t \t ctx.fillRect(0,0,imageWidth,imageHeight);
\t \t \t \t
\t \t \t \t var box = null;
\t \t \t \t var xMin = 0;
\t \t \t \t var xMax = 0;
\t \t \t \t var yMin = 0;
\t \t \t \t var yMax = 0;
\t \t \t \t
\t \t \t \t ctx.fillStyle = "black";
\t \t \t \t
\t \t \t \t for (var i = 0; i < boxArray.length; ++i) {
\t \t \t \t \t box = boxArray[i];
\t \t \t \t \t
\t \t \t \t \t xMin = box.x - panX;
\t \t \t \t \t xMax = box.x + box.width - panX;
\t \t \t \t \t yMin = box.y - panY;
\t \t \t \t \t yMax = box.y + box.height - panY;
\t \t \t \t \t
\t \t \t \t \t if (xMax > 0 && xMin < imageWidth && yMax > 0 && yMin < imageHeight) {
\t \t \t \t \t \t box.draw();
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t \t
\t \t \t window.onload = function() {
\t \t \t \t canvas = document.getElementById("canvas");
\t \t \t \t canvas.width = imageWidth;
\t \t \t \t canvas.height = imageHeight;
\t \t \t \t
\t \t \t \t bounds = canvas.getBoundingClientRect();
\t \t \t \t ctx = canvas.getContext("2d");
\t \t \t \t ctx.textAlign = "center";
\t \t \t \t ctx.font = "15px Arial"
\t \t \t \t
\t \t \t \t boxArray.push(new DraggableBox(Math.random() * 320,Math.random() * 240,100,25,"This is a draggable text box"));
\t \t \t \t boxArray.push(new DraggableBox(Math.random() * 320,Math.random() * 240,100,50,"Another text box"));
\t \t \t \t boxArray.push(new DraggableBox(Math.random() * 320,Math.random() * 240,100,50,"Text in a box"));
\t \t \t \t boxArray.push(new DraggableBox(Math.random() * 320,Math.random() * 240,100,50,"I find this box quite texing"));
\t \t \t \t boxArray.push(new DraggableBox(Math.random() * 320,Math.random() * 240,150,50,"You weren't supposed to find this box"));
\t \t \t \t requestAnimationFrame(draw);
\t \t \t }
\t \t \t
\t \t \t window.onunload = function() {
\t \t \t \t canvas = null;
\t \t \t \t ctx = null;
\t \t \t \t bounds = null;
\t \t \t \t selectedBox = null;
\t \t \t \t boxArray = null;
\t \t \t }
\t \t \t
\t \t </script>
\t </body>
</html>
Lassen Sie uns wissen, was Sie selbst ausprobiert habe. – mjwatts
Haben Sie nicht viel Erfahrung mit Leinwand, aber können Sie mehrere Leinwände verwenden, so wie Google Maps kleine Kartenplättchen verwendet? – realharry