个人中心
gpt4 book ai didi

javascript - 使用 JavaScript 使在 Canvas 上绘制的图像可拖动

转载 作者：行者123 更新时间：2023-12-03 02:06:37 27 4
gpt4 key购买 nike

我能够在 HTML Canvas 上成功绘制图像。但我需要能够在 Canvas 上拖动图像。

我知道这个功能可以通过一些JavaScript库(例如KinectJS)轻松实现。但我想用简单的 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>

最佳答案

要进行拖动，您需要处理 3 个鼠标事件:

  1. mousedown -- 设置一个标志来指示拖动已经开始。

  2. mouseup -- 清除拖动标志，因为拖动已结束

  3. mousemove -- 如果设置了拖动标志，则清除 Canvas 并在鼠标位置绘制图像

这是一些代码:

<!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>

关于javascript - 使用 JavaScript 使在 Canvas 上绘制的图像可拖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15036386/

27 4 0
文章推荐： javascript - JavaScript 中的 Blob 对象转为 base64
文章推荐： php - 当等效普通查询返回更多行时，带有预准备语句的 num_rows 返回 0 行
文章推荐： javascript - 长时间运行函数的 DOM 刷新
文章推荐： asp.net-mvc - 如何在提交操作中获取所有列表框项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com