个人中心
gpt4 book ai didi

javascript - Canvas 颜色和拖放

转载 作者：行者123 更新时间：2023-11-30 13:57:53 25 4
gpt4 key购买 nike

Drawings on an image

在我的代码中，我想在每一步都改变绘图的颜色；但是，如果我在第 3 步更改颜色，前面步骤中的颜色也会更改为第 3 步颜色。我想做我不同的颜色。为了更好地理解，我提供了 1 或 2 张照片。

此外，我希望我的绘图可拖动，但是由于我使用 Canvas ，我不能使用 jquery-ui (.draggable)，而且由于 Canvas ，我无法更改绘图的 ID。

jQuery(document).ready(function($) {

  //Canvas
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  //Variables
  var canvasOffset = $("#canvas").offset();
  var canvasx = canvasOffset.left;
  var canvasy = canvasOffset.top;
  var last_mousex = 0;
  var last_mousey = 0;
  var mousex = 0;
  var mousey = 0;
  var mousedown = false;
  var shapes = [];
  var width;
  var height;

  //Mousedown
  $(canvas).on('mousedown', function(e) {
    last_mousex = parseInt(e.clientX - canvasx);
    last_mousey = parseInt(e.clientY - canvasy);
    mousedown = true;
  });

  //Mouseup
  $(canvas).on('mouseup', function(e) {
    const lastPos = {
      lastMouseX: last_mousex,
      lastMouseY: last_mousey,
      rectWidth: width,
      rectHeight: height
    };
    shapes.push(lastPos);
    mousedown = false;
  });

  //Mousemove
  $(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX - canvasx);
    mousey = parseInt(e.clientY - canvasy);
    if (mousedown) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      width = mousex - last_mousex;
      height = mousey - last_mousey;
      var col = $(".color").val();
      if (shapes.length > 0) {
        for (var i in shapes) {
          ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight);
        }
      }
      ctx.rect(last_mousex, last_mousey, width, height);
      ctx.strokeStyle = col;
      ctx.lineWidth = 10;
      ctx.stroke();
    }
    $("#canvas").mousedown(function(e) {
      handleMouseDown(e);
    });
    $("#canvas").mousemove(function(e) {
      handleMouseMove(e);
    });
    $("#canvas").mouseup(function(e) {
      handleMouseUp(e);
    });

    //Output
    $('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown);
  });
});
.color {
  border: 1px solid black;
  font-family: 'Times New Roman', Times, serif;
  font-size: 40px;
}

#canvas {
  cursor: crosshair;
  border: 1px solid #000000;
  background-image: url("kroki2v3.png");
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

#output {
  font-family: 'Times New Roman', Times, serif;
  font-size: 40px;
}
<html>

<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <input type="text" maxlength="50" class="color" required />
  <div id="container" style="display: none;"><img src="kroki2v3.png" id="img01" alt="" style="display: none;"></div>
  <canvas id="canvas" width="3200" height="1400"></canvas>
  <div id="output"></div>
</body>

</html>

最佳答案

我对您的代码做了一些更改:

  1. 将var col设为全局变量

  2. 鼠标抬起时保存当前矩形的颜色:color:col

  3. 当您在shapes 数组中绘制形状时，您需要为每个矩形ctx.beginPath()。您还可以为每个矩形设置描边颜色:ctx.strokeStyle = shapes[i].color;

观察:您可以使用 strokeRect()方法代替 rect() 和 stroke()

在代码中，我标记了我进行更改的那些点。阅读评论。

jQuery(document).ready(function($) {

  //Canvas
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  //Variables
  var canvasOffset = $("#canvas").offset();
  var canvasx = canvasOffset.left;
  var canvasy = canvasOffset.top;
  var last_mousex = 0;
  var last_mousey = 0;
  var mousex = 0;
  var mousey = 0;
  var mousedown = false;
  var shapes = [];
  var width;
  var height;
  // make var col a global variable
  var col = "black";

  //Mousedown
  $(canvas).on('mousedown', function(e) {
    last_mousex = parseInt(e.clientX - canvasx);
    last_mousey = parseInt(e.clientY - canvasy);
    mousedown = true;
  });

  //Mouseup
  $(canvas).on('mouseup', function(e) {
    const lastPos = {
      lastMouseX: last_mousex,
      lastMouseY: last_mousey,
      rectWidth: width,
      rectHeight: height,
      // save the color of the rect
      color:col
    };
    shapes.push(lastPos);
    mousedown = false;
  });

  //Mousemove
  $(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX - canvasx);
    mousey = parseInt(e.clientY - canvasy);
    if (mousedown) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      width = mousex - last_mousex;
      height = mousey - last_mousey;
      col = $(".color").val();
      if (shapes.length > 0) {
        for (var i in shapes) {
          // for every shape in the shapes array beginPath
          ctx.beginPath();
          //set the color of the stroke
          ctx.strokeStyle = shapes[i].color;
          //draw the rect
          ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight);
          ctx.stroke();
        }
      }
      
      //for the new rect beginPath
      ctx.beginPath();
      ctx.rect(last_mousex, last_mousey, width, height);
      ctx.strokeStyle = col;
      ctx.lineWidth = 10;
      ctx.stroke();
    }
    
    /*
    $("#canvas").mousedown(function(e) {
      handleMouseDown(e);
    });
    $("#canvas").mousemove(function(e) {
      handleMouseMove(e);
    });
    $("#canvas").mouseup(function(e) {
      handleMouseUp(e);
    });*/

    //Output
    $('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown);
  });
});
.color {
  border: 1px solid black;
  font-family: 'Times New Roman', Times, serif;
  font-size: 40px;
}

#canvas {
  cursor: crosshair;
  border: 1px solid #000000;
  background-image: url("kroki2v3.png");
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

#output {
  font-family: 'Times New Roman', Times, serif;
  font-size: 40px;
}
<html>

<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <input type="text" maxlength="50" class="color" required />
  <div id="container" style="display: none;"><img src="kroki2v3.png" id="img01" alt="" style="display: none;"></div>
  <canvas id="canvas" width="3200" height="1400"></canvas>
  <div id="output"></div>
</body>

</html>

关于javascript - Canvas 颜色和拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56870853/

25 4 0
文章推荐： json - SWIFT 2 - alamofire - 解析 JSON 参数
文章推荐： c# - 无法加载 DLL 'sqlite3' : The specified module could not be found
文章推荐： ios - 检查 UIAlertController 中的字段验证
文章推荐： javascript - 设置带有响应的标题
行者123
个人简介

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

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