Как заставить холст двигаться только с помощью функции HTML5? - PullRequest
Новая
       26

Как заставить холст двигаться только с помощью функции HTML5?

0 голосов
/ 03 декабря 2011

Я хочу переместить форму, которую я рисую, на холсте, например: я рисую прямоугольник.Как я могу переместить его в определенную область с атрибутом перетаскивания?и с помощью сценария Java для добавления слушателя.

в ожидании помощи.

Это мой код: 

   in Java script file :

    var c=document.getElementById("rectangle");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#009933";
    cxt.fillRect(20,10
    ,150,75);


    function dragStart(ev) {
//allow move
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.dropEffect='move';

//on transfer
var style = ev.target.getAttribute("id").style;
ev.dataTransfer.setData("Text",ev.target.getAttribute("id"));
//ev.dataTransfer.setDragImage(ev.target,0,0);
ev.dataTransfer.setDragImage(ev.target,(parseInt(style.getPropertyValue("left"),10) - ev.clientX) ,(parseInt(style.getPropertyValue("top"),10) - ev.clientY));
return true;
}
function dragEnter(ev) {

return true;
}
function dragOver(event) {
event.preventDefault();
return false;
}
function dragDrop(ev) {
//var offset = event.dataTransfer.getData("text/plain").split(',');
   var dm = document.getElementById(ev.dataTransfer.getData("Text"));
   // dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
   // dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
 ev.target.appendChild(dm); 
 ev.stopPropagation();  
ev.preventDefault();
    return false;

}

HTML File:
<div  ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
<canvas id="rectangle" width="200px" height="150px" draggable="true"></canvas>
</div>

<div id="target"ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">

</div>

Ответы [ 2 ]

1 голос
/ 03 декабря 2011

Основы HTML5 Canvas

Сначала давайте обсудим, как работает HTML5 Canvas.Как настоящий холст с быстросохнущими масляными красками, когда вы stroke() или fill() или drawImage() на холсте, краска становится частью холста.Хотя вы нарисовали «прямоугольник» и видите его таким, пиксели прямоугольника полностью заменили фон (или, в случае сглаживания по краям прямоугольника, смешались с ними и навсегда изменили их).Что бы сказал Моне, если бы вы попросили его «переместить» одного из людей на картине немного вправо?Вы не можете переместить прямоугольник, вы не можете перетащить прямоугольник, вы не можете стереть прямоугольник, вы не можете обнаружить наведение мыши на прямоугольник ... потому что нет прямоугольника , есть толькоодин двумерный массив пикселей.

«Перетаскивание» на холсте HTML5

Что вы можете сделать (должны сделать), это самостоятельно отслеживать движения мыши, очищать и перерисовывать холст с помощью прямоугольника в разных местахкогда вы «перетаскиваете» его.

0 голосов
/ 03 декабря 2011

Вы пытаетесь сделать что-то подобное?

http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/

...