1
テキストボックスを点在させた「無限の」キャンバスを作成する必要があります。HTML無限のパンが可能なキャンバス
Desmosサイトでこのような：
https://www.desmos.com/calculator
私はそれを自分自身を実装するために管理していません。
質問
は、誰もがこれで私を助けてもらえますか？
A
答えて
0
パン可能なキャンバスに最も簡単なアプローチは、オフセットに関連してすべてを描画することです。この例では、このpanXをpanYと呼んでいます。& panY。ビューポート（現在キャンバスに表示されている無限ボードの領域）を移動するために使用する座標として想像してください。
<!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>関連する問題
- 1. パンとズーム可能なビューコンテナ（html）
- 2. 無限サークルスクロールが可能な水平リストボックス
- 3. アンドロイドのビュー/キャンバスをパン/エキスパンダ
- 4. 縮小キャンバス画像のHTMLキャンバスドラッグ可能なテキスト
- 5. HTMLキャンバス：ズームと制限
- 6. HTML5ドラッグ可能なsetDragImageがChromeのキャンバスで機能しない
- 7. openglの中で無限のキャンバス
- 8. ズーム、パン、POIを可能にするフォームコントロール
- 9. キャンバス上の描画可能なイメージ
- 10. Grailsの検索可能なプラグイン：無制限の結果
- 11. UIパンのジェスチャーが機能しない
- 12. ポインタイベントでスクロール可能なdivでのドラッグとパンのサポート
- 13. MeasureOverrideの利用可能なサイズは無限です
- 14. Xcodeストーリーボードが表示されません。キャンバスをズーム/パンすることは可能ですか？
- 15. アンドロイドで編集可能なキャンバス
- 16. Groovyスクリプト：可能なメモリリークや無限ループを防ぐ方法
- 17. ユーザーがカスタマイズ可能なレール権限
- 18. アンドロイド：リンクがクリック可能なテキストビューのhtml
- 19. HTMLのドラッグアンドドロップソート可能なテーブル
- 20. LightSwitchのHTML無限スクロールバグ
- 21. HTML＆JS無限のバックグラウンドループ
- 22. 無限に大きなキャンバスを持つには？
- 23. 無限にネスト可能なモデルの強力なパラメータをレンダリングします。
- 24. マーキング可能なHTMLテーブルセル
- 25. スイングでオブジェクト間の可能なパスを計算するための戦略（無限大の可能性あり）？
- 26. のjQuery UIのドラッグ可能な制限
- 27. ROBLOX.Lua無限の可能性のある修正？
- 28. jQuery UIスプリッタ/無制限の列のサイズ変更可能
- 29. jqueryが動作しないhtmlのキャンバス
- 30. HTMLキャンバスがAndroid Chromeのスクロールウィンドウでない
私たちはあなたが自分自身を試してみたものを知ってみましょう。 – mjwatts
キャンバスの経験はあまりありませんが、Googleマップでは小さなマップタイルを使用するように複数のキャンバスを使用できますか？ – realharry