如何在畫布上實現克隆元素
[英]How can I implement cloning elements onto canvas
問題描述
我正在努力將可拖動元素的克隆復制到畫布（可放置元素）上。 到目前為止，我只能拖動一個原始圖像，但我需要它的副本才能拖動到。 這是它必須如何工作source以及它現在如何工作source 1 source 2 。 所以它不適用於其他圖像。
// 1 - wall, 0 - free/street const map1 = [ [1, 1, 1, 1], [0, 0, 0, 0], [1, 0, 1, 1], [1, 0, 0, 0] ]; const city = map1; const size = 41; window.onload = function() { const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); //draw images const p = ctx.lineWidth; //padding for (let i = 0; i < city.length; i++) { for (let j = 0; j < city[i].length; j++) { const x = i * size; const y = j * size; const img = new Image(); img.onload = function() { ctx.drawImage(img, x, y, size + p * 2, size + p * 2); }; img.src = city[i][j] == 0 ? "images/white.png" : "images/black.png"; } } }; $(document).ready(function() { let currentDroppable = null; const cam1 = document.getElementById('cam1'); cam1.onmousedown = function(event) { let shiftX = event.clientX - cam1.getBoundingClientRect().left; let shiftY = event.clientY - cam1.getBoundingClientRect().top; cam1.style.position = 'absolute'; cam1.style.zIndex = 1000; document.body.append(cam1); moveAt(event.pageX, event.pageY); function moveAt(pageX, pageY) { cam1.style.left = pageX - shiftX + 'px'; cam1.style.top = pageY - shiftY + 'px'; } function onMouseMove(event) { moveAt(event.pageX, event.pageY); cam1.hidden = true; let elemBelow = document.elementFromPoint(event.clientX, event.clientY); cam1.hidden = false; if (!elemBelow) return; let droppableBelow = elemBelow.closest('#canvas'); if (currentDroppable != droppableBelow) { if (currentDroppable) { // null when we were not over a droppable before this event leaveDroppable(currentDroppable); } currentDroppable = droppableBelow; if (currentDroppable) { // null if we're not coming over a droppable now // (maybe just left the droppable) enterDroppable(currentDroppable); } } } document.addEventListener('mousemove', onMouseMove); cam1.onmouseup = function() { document.removeEventListener('mousemove', onMouseMove); cam1.onmouseup = null; }; }; function enterDroppable(elem) { elem.style.background = 'blue'; } function leaveDroppable(elem) { elem.style.background = ''; } cam1.ondragstart = function() { return false; }; });
body { color: #000; } h1, footer { text-align: center; margin-top: 10px; } #game { border: 1px solid #666; position: relative; width: 600px; height: 450px; margin: 0 auto; z-index: 1; background-color: gold; } #cam1 { cursor: pointer; } #canvas { cursor: pointer; } .cameras { position: absolute; flex-direction: column; flex-wrap: wrap; right: 0; top: 0; z-index: 200; display: flex; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>cameras of the city</title> <link rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.min.css"> <link rel="stylesheet" href="styles.css"> <script src="js/jquery-3.4.1.js"></script> <script src="js/jquery-ui-1.12.1/jquery-ui.min.js"></script> </head> <body> <header> <h1>cameras of the city</h1> </header> <div id="game"> <canvas height="450px" width="450px" id="canvas"></canvas> <div class="cameras"> <img id="cam1" src="images/camera1.png"> <img id="cam2" src="images/camera2.png"> <img id="cam3" src="images/camera3.png"> <img id="cam4" src="images/camera4.png"> </div> </div> <footer> created: </footer> <script src="js/core.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2020-01-05 20:45:12
根據您的代碼，您必須：
- 在鼠標按下時克隆
cam1。 - 將頂部和左側的
cam1屬性添加到克隆對象。 - 附加到主體然后移動克隆的對象並向其添加相應的事件。
我將使用 jQuery，因為它包含在上面的代碼段中。
編輯：
下面的代碼不僅可以拖動cam1 ，還可以拖動所有圖像：
// 1 - wall, 0 - free/street const map1 = [ [1, 1, 1, 1], [0, 0, 0, 0], [1, 0, 1, 1], [1, 0, 0, 0] ]; const city = map1; const size = 41; window.onload = function() { const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); //draw images const p = ctx.lineWidth; //padding for (let i = 0; i < city.length; i++) { for (let j = 0; j < city[i].length; j++) { const x = i * size; const y = j * size; const img = new Image(); img.onload = function() { ctx.drawImage(img, x, y, size + p * 2, size + p * 2); }; img.src = city[i][j] == 0 ? "images/white.png" : "images/black.png"; } } }; $(document).ready(function() { let currentDroppable = null, clone; function moveAt(pageX, pageY, shiftX, shiftY) { clone.style.left = pageX - shiftX + 'px'; clone.style.top = pageY - shiftY + 'px'; } function onMouseMove(event) { moveAt(event.pageX, event.pageY, 0, 0); clone.hidden = true; let elemBelow = document.elementFromPoint(event.clientX, event.clientY); clone.hidden = false; if (!elemBelow) return; let droppableBelow = elemBelow.closest('#canvas'); if (currentDroppable != droppableBelow) { if (currentDroppable) { // null when we were not over a droppable before this event leaveDroppable(currentDroppable); } currentDroppable = droppableBelow; if (currentDroppable) { // null if we're not coming over a droppable now // (maybe just left the droppable) enterDroppable(currentDroppable); } } } $(document).on('mousedown', '.drag', function(e){ var tmp = $(this).clone().removeClass("drag"); $(tmp).css({position: 'absolute', top: $(this).offset().top + "px", left: $(this).offset().left + "px", opacity: 1, 'z-index': 1000}); $('body').append($(tmp)); clone = $(tmp)[0]; let shiftX = event.clientX - clone.getBoundingClientRect().left; let shiftY = event.clientY - clone.getBoundingClientRect().top; moveAt(event.pageX, event.pageY, shiftX, shiftY); document.addEventListener('mousemove', onMouseMove); clone.onmouseup = function() { document.removeEventListener('mousemove', onMouseMove); clone.onmouseup = null; }; }); function enterDroppable(elem) { elem.style.background = 'blue'; } function leaveDroppable(elem) { elem.style.background = ''; } cam1.ondragstart = function() { return false; }; });
body { color: #000; } h1, footer { text-align: center; margin-top: 10px; } #game { border: 1px solid #666; position: relative; width: 600px; height: 450px; margin: 0 auto; z-index: 1; background-color: gold; } .drag { cursor: pointer; } #canvas { cursor: pointer; } .cameras { position: absolute; flex-direction: column; flex-wrap: wrap; right: 0; top: 0; z-index: 200; display: flex; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>cameras of the city</title> <link rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.min.css"> <link rel="stylesheet" href="styles.css"> <script src="js/jquery-3.4.1.js"></script> <script src="js/jquery-ui-1.12.1/jquery-ui.min.js"></script> </head> <body> <header> <h1>cameras of the city</h1> </header> <div id="game"> <canvas height="450px" width="450px" id="canvas"></canvas> <div class="cameras"> <img id="cam1" class="drag" src="images/camera1.png"> <img id="cam2" class="drag" src="images/camera2.png"> <img id="cam3" class="drag" src="images/camera3.png"> <img id="cam4" class="drag" src="images/camera4.png"> </div> </div> <footer> created: </footer> <script src="js/core.js"></script> </body> </html>
JavaScript畫布，手動將畫布克隆到另一個畫布上會生成奇怪的圖案
[英]JavaScript canvas, manually cloning a canvas onto another generates a weird pattern
如何使用 JavaScript 放大鏡放大 canvas 上的多個元素？
[英]How can I magnify multiple elements on a canvas using the JavaScript magnifier?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.