Utwórz obraz narysowany na płótnie przeciągalny za pomocą JavaScriptu

Udało mi się narysować obrazek na kanwie HTML. Ale muszę mieć możliwość przeciągnięcia obrazu na płótnie.Utwórz obraz narysowany na płótnie przeciągalny za pomocą JavaScriptu

Wiem, że ta funkcja może być łatwo zaimplementowana przez niektóre biblioteki JavaScript, takie jak KinectJS. Ale chcę to zrobić za pomocą prostego JavaScript.

window.onload = function(){ 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var destX = 0; 
var destY = 0; 
var imageObj = new Image(); 

imageObj.onload = function(){ 
    context.drawImage(imageObj, destX, destY); 
}; 
imageObj.src = "westeros.png";

<canvas id="myCanvas" height=1024 width=360></canvas>

Źródło

2013-02-23 Donnie Ibiyemi

Aby zrobić przeciągając obsłużyć 3 zdarzenia myszy:

mousedown - ustawić flagę wskazującą, że opór został rozpoczęty.
mouseUp - usunąć tę flagę przeciągania ponieważ opór jest ponad
mousemove - jeśli flaga jest ustawiona drag, wyczyścić canvas i narysować obraz w pozycji myszy

Oto kod:

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 


    var img = new Image(); 
    img.onload = function(){ 
     ctx.drawImage(img, 0,0); 
    }; 
    img.src = "http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg"; 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var canvasWidth=canvas.width; 
    var canvasHeight=canvas.height; 
    var isDragging=false; 

    function handleMouseDown(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     // set the drag flag 
     isDragging=true; 
    } 

    function handleMouseUp(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     // clear the drag flag 
     isDragging=false; 
    } 

    function handleMouseOut(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     // user has left the canvas, so clear the drag flag 
     //isDragging=false; 
    } 

    function handleMouseMove(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     // if the drag flag is set, clear the canvas and draw the image 
     if(isDragging){ 
      ctx.clearRect(0,0,canvasWidth,canvasHeight); 
      ctx.drawImage(img,canMouseX-128/2,canMouseY-120/2,128,120); 
     } 
    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
    $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
    $("#canvas").mouseout(function(e){handleMouseOut(e);}); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=400 height=300></canvas> 
</body> 
</html>

Źródło

2013-02-23 04:37:32 markE

Dzięki !! Ale czy to działa również na urządzeniach dotykowych? –

Łatwe dodawanie dotyku. Dla dotyku poradzisz sobie z 3 zdarzeniami podobnymi do zdarzeń myszy: touchstart, touchend i touchmove. – markE

Jestem nowicjuszem, możesz to zrobić dla mnie. Wygląda na to, że ciężko pracujesz nad tym, aby działał na moim tablecie. :) :) –

markE's answer got me większość drogi tam, ale miałem pewne problemy z nim uznając lokalizację moje wa myszy s. Załączam swój kod, chociaż od kiedy pracuję z OO JS, będzie on różnie skonstruowany:

hitImage: function() { 
     return (this.startX > this.imageX && this.startX < this.imageX + this.imageWidth && this.startY > this.imageY && this.startY < this.imageY + this.imageHeight); 
    }, 

    handleMouseDown: function(e){ 
     this.startX = parseInt(e.clientX - this.offsetX); 
     this.startY = parseInt(e.clientY - this.offsetY); 
     // set the drag flag 
     this.isDragging= this.hitImage; 
    }, 

    handleMouseUp: function(e,img){ 
     this.startX=parseInt(e.clientX-this.offsetX); 
     this.startY=parseInt(e.clientY-this.offsetY); 
     // clear the drag flag 
     this.isDragging=false; 
     this.drawImage(e,img); 
    }, 

    handleMouseOut: function(e,img){ 
     this.handleMouseUp(e,img); 
    }, 

    handleMouseMove: function(e,img){ 
     // only compute new positions if in drag 
     if(this.isDragging){ 

     this.canMouseX=parseInt(e.clientX - this.offsetX); 
     this.canMouseY=parseInt(e.clientY - this.offsetY); 
     // move the image by the amount of the latest drag 
     var dx = this.canMouseX - this.startX; 
     var dy = this.canMouseY - this.startY; 

     this.imageX += dx; 
     this.imageY += dy; 
     // Negative image locations break the pattern in this.fillPattern 
     this.imageY = Math.max(0, this.imageY); 
     this.imageX = Math.max(0, this.imageX); 

     // reset the startXY for next time 
     this.startX = this.canMouseX; 
     this.startY = this.canMouseY; 

     this.drawImage(e,img); 
     }

Źródło

2015-02-14 22:06:03 cpres

Uczę się przeciągać obraz z płótnem HTML5. Interesuje mnie twoje podejście, ale znalazłem problem: nie mogę znaleźć funkcji drawImage() w twoim kodzie. Czy mógłbyś podać plunarza lub skrzypce dla tego fragmentu? Dziękuję Ci. – asubanovsky

Możesz dowiedzieć się o funkcji drawImage tutaj: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage – cpres

OK. Dziękuję Ci. – asubanovsky

Utwórz obraz narysowany na płótnie przeciągalny za pomocą JavaScriptu

Odpowiedz

Powiązane problemy