проблем с холстом

Вот мой HTML документ:проблем с холстом

<html> 
<head> 

<meta charset="utf-8"> 
<title>Automapper Editor</title> 

</head> 
<body> 

<nobr> 

<script> 
var img = new Image() 
img.src = "grass_main_0.7.png" 

for(var y=0; y < 16; y++) { 
    for(var x=0; x < 16; x++) { 
      var tilecanvas = document.createElement("canvas") 
      var tilectx = tilecanvas.getContext("2d") 
      tilecanvas.width = 64 
      tilecanvas.height = 64 
      tilecanvas.draggable = true 
      tilectx.drawImage(img, x*64, y*64, 64, 64, 0, 0, 64, 64) 
      document.body.appendChild(tilecanvas) 
    } 
    document.body.appendChild(document.createElement("br")) 
} 
</script> 

</nobr> 

</body> 
</html>

Я хочу, чтобы разделить изображение с размером 1024 пикселя в 16 изображениях с размером 64 пикселей. Затем я хочу нарисовать их на холсте и записать их в документ. Это мои проблемы:

Линия tilecanvas.draggable = true не работает, то это должно сделать то же самое, как <canvas draggable="true">.
Тег <nobr> не мешает холсту от упаковки, но я хочу, чтобы они оставались 16x16 на экране.
Первый раз при загрузке страницы, вы не можете видеть изображение, вы можете имитировать это, нажав STRG + F5 (а.к.а. Ctrl-F5) в светлячок.

источник

2015-02-25 timakro

Вы можете решить ее:

Использование контейнера DIV для плитки
Установка фиксированной ширины для контейнера элемента
Отрегулируйте CSS для холста элемента плавать

Личный пример

(примечание: добавлено случайный альфа для плитки/демо, чтобы увеличить видимость)

var img = new Image(); 
 
img.onload = render; 
 
img.src = "http://www.psdgraphics.com/file/colorful-triangles-background.jpg"; 
 

 
function render() { 
 

 
    var cont = document.getElementById("cont"); 
 

 
    for (var y = 0; y < 16; y++) { 
 
    for (var x = 0; x < 16; x++) { 
 
     var tilecanvas = document.createElement("canvas"); 
 
     var tilectx = tilecanvas.getContext("2d"); 
 
     tilecanvas.width = 64; 
 
     tilecanvas.height = 64; 
 
     tilecanvas.draggable = true; 
 

 
     tilectx.globalAlpha = Math.random() + 0.5; // just to increase visuals 
 
     
 
     tilectx.drawImage(img, x * 64, y * 64, 64, 64, 0, 0, 64, 64); 
 
     cont.appendChild(tilecanvas); 
 
    } 
 
    } 
 
}

#cont {width: 1024px;border: 1px solid #000} 
 
canvas {float:left}

<div id="cont"></div>

источник

2015-02-25 20:13:33 K3N

Могу ли я принять 2 ответов? – timakro

По словам RienNeVaPlu͢s & Кена Фирстенберга, убедитесь, что вы даете свое время изображения для загрузки с onload.

Вот доказательство правильности концепции, позволяющей HTML перетащить капли сращивания имидж-холстов:

https://jsfiddle.net/m1erickson/g9nfuved/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<style> 
    body{ background-color: ivory; padding:10px; } 
    canvas{border:1px solid red; margin-left:0px;} 
    #dropzone{width:250px;height:50px;border:1px solid blue;} 
</style> 
<script> 
$(function(){ 

    var $results=$('#results'); 

    var img=new Image(); 
    img.onload=start; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png"; 
    function start(){ 

     var w=img.width/4; 
     var h=img.height; 

     for(var x=0; x < 4; x++) { 
       var tilecanvas = document.createElement("canvas"); 
       var tilectx = tilecanvas.getContext("2d"); 
       tilecanvas.width = w; 
       tilecanvas.height = h; 
       tilecanvas.draggable = true 
       tilecanvas.id='canvas'+x; 
       tilectx.drawImage(img, x*w,0,w,h, 0, 0, w, h) 
       document.body.appendChild(tilecanvas) 
       tilecanvas.addEventListener('dragstart', function(e){ 
        e.dataTransfer.setData('text',e.target.id); 
       }, false); 
       tilecanvas.addEventListener('dragenter', handleEvents, false); 
       tilecanvas.addEventListener('dragover', handleEvents, false); 
       tilecanvas.addEventListener('dragleave', handleEvents, false); 
       tilecanvas.addEventListener('dragend', handleEvents, false); 
     } 
     document.body.appendChild(document.createElement("br")) 
     var dropzone=document.getElementById('dropzone'); 
     dropzone.addEventListener('dragover',function(e){e.preventDefault(); return(false);}); 
     dropzone.addEventListener('dragenter',function(e){return(false);}); 
     dropzone.addEventListener('drop',function(e){ 
      $results.text('You dropped: '+e.dataTransfer.getData('text')); 
      return(false); 
     }); 
    } 

    function handleEvents(e){ return(false); } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <h4 id='results'>Drag 1+ of the image strips</h4> 
    <div id='dropzone' droppable='true'>Drop Here.</div> 
</body> 
</html>

источник

2015-02-25 20:56:39 markE

Могу ли я принять 2 ответа? – timakro

Нет, всего 1 принятый ответ на вопрос. Я в порядке, зная, что мой ответ был полезен, даже если он не принят в качестве ответа. :-) – markE

проблем с холстом

ответ

Смежные вопросы