个人中心
gpt4 book ai didi

javascript - 如何在可视化橡皮筋的同时在 Canvas 上绘制多个形状？

转载 作者：行者123 更新时间：2023-12-02 22:19:19 26 4
gpt4 key购买 nike

我正在使用canvas和js制作一个带有橡皮筋的绘画工具。目前它绘制椭圆，但每次我开始拖动一个新形状时 - 由于rubberBand函数的具体情况，前一个形状会被删除，因为它每次都会清除 Canvas 。有什么办法可以解决这个问题吗？

这是 jsfiddle 链接:https://jsfiddle.net/ThePanda/bspf5v40/

HTML (index.html):

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
    <script src="index.js"></script>
  </head>
  <body>
    <div style="position:absolute; top:4px; left:4px;"><canvas id="canvas"></canvas></div>
    <script>
      canvasEngine();
    </script>
  </body>
</html>

CSS(样式.css):

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#canvas {
    border: 2px solid black;
}

JavaScript (index.js):

function canvasEngine() {
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');

  canvas.height = window.innerHeight - 12;
  canvas.width = window.innerWidth - 12;

  //letiables
  let canvasStartX = 4;
  let canvasStartY = 4;
  let lastMouseY, lastMouseX;
  let mouseX, mouseY;
  let width, height;

  let mousedown = false;

  //Mousedown
  function startPosition(e) {
    lastMouseX = parseInt(e.clientX - canvasStartX);
    lastMouseY = parseInt(e.clientY - canvasStartY);
    mousedown = true;
  };

  //Mousemove
  function rubberBand(e) {
    if (!mousedown) return;

    mouseX = parseInt(e.clientX - canvasStartX);
    mouseY = parseInt(e.clientY - canvasStartY);

    ctx.clearRect(0,0,canvas.width,canvas.height);

    ctx.beginPath();
    width = mouseX-lastMouseX;
    height = mouseY-lastMouseY;
    ctx.rect(lastMouseX,lastMouseY,width,height);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.stroke();
  };

  //Mouseup
  function finishedPosition(e) {
    mousedown = false;

    mouseX = parseInt(e.clientX - canvasStartX);
    mouseY = parseInt(e.clientY - canvasStartY);

    width = mouseX - lastMouseX;
    height = mouseY - lastMouseY;

    const rw = Math.abs(width/2);
    const rh = Math.abs(height/2);

    let centerX = mouseX - width/2;
    let centerY = mouseY - height/2;

    ctx.clearRect(0,0,canvas.width,canvas.height);

    ctx.beginPath();
    ctx.ellipse(centerX,centerY,rw,rh,0,0,2 * Math.PI);
    ctx.strokeStyle = color;
    ctx.lineWidth = 5;
    ctx.stroke();
  };

  canvas.addEventListener("mousedown", startPosition);
  canvas.addEventListener("mousemove", rubberBand);
  canvas.addEventListener("mouseup", finishedPosition);
};

最佳答案

您的代码对于您想要实现的目标来说基本上是正确的。

主要问题是每次绘制新内容时都会调用ctx.clearRect。这样整个 Canvas 就被清除了，旧的省略号也消失了。

我尝试对您的代码进行最小的更改来解决此问题:

function canvasEngine() {
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
    
  canvas.height = window.innerHeight - 12;
  canvas.width = window.innerWidth - 12;
  
  //letiables
  let canvasStartX = 4;
  let canvasStartY = 4;
  let lastMouseY, lastMouseX;
  let mouseX, mouseY;
  let width, height;
  
  let mousedown = false;
  
  let ellipses = [];

	function drawEllipse(ellipse) {
  	ctx.beginPath();
  	ctx.ellipse(
    	ellipse.centerX,
      ellipse.centerY,
      ellipse.rw,
      ellipse.rh,
      0,
      0,
      2 * Math.PI
    );
    ctx.stroke();
  }

	function drawEllipses() {
  	ctx.strokeStyle = 'black';
    ctx.lineWidth = 5;
  	
  	ellipses.forEach(drawEllipse)
  }

  //Mousedown
  function startPosition(e) {
    lastMouseX = parseInt(e.clientX - canvasStartX);
    lastMouseY = parseInt(e.clientY - canvasStartY);
    mousedown = true;
  };
  
  //Mousemove
  function rubberBand(e) {
    if (!mousedown) return;

    mouseX = parseInt(e.clientX - canvasStartX);
    mouseY = parseInt(e.clientY - canvasStartY);
    
    ctx.clearRect(0,0,canvas.width,canvas.height);
    
    drawEllipses();

    ctx.beginPath();
    width = mouseX-lastMouseX;
    height = mouseY-lastMouseY;
    ctx.rect(lastMouseX,lastMouseY,width,height);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.stroke();
  };

  //Mouseup
  function finishedPosition(e) {
    mousedown = false;

    mouseX = parseInt(e.clientX - canvasStartX);
    mouseY = parseInt(e.clientY - canvasStartY);

    width = mouseX - lastMouseX;
    height = mouseY - lastMouseY;
    
    const rw = Math.abs(width/2);
    const rh = Math.abs(height/2);
    
    let centerX = mouseX - width/2;
    let centerY = mouseY - height/2;
    
    // Add the ellipse to the list of ellipses
    ellipses.push({ centerX, centerY, rw, rh })

    ctx.clearRect(0,0,canvas.width,canvas.height);
    drawEllipses();
  };
  
  canvas.addEventListener("mousedown", startPosition);
  canvas.addEventListener("mousemove", rubberBand);
  canvas.addEventListener("mouseup", finishedPosition);
};

canvasEngine();
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#canvas {
    border: 2px solid black;
}
<div style="position:absolute; top:4px; left:4px;"><canvas id="canvas"></canvas></div>

关于javascript - 如何在可视化橡皮筋的同时在 Canvas 上绘制多个形状？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59290280/

26 4 0
文章推荐： javascript - 如何将请求的 JSON 消息转换为可用数据？
文章推荐： javascript - 如何将 for 循环中的每个项目添加到 ReactJS 数组中
文章推荐： javascript - 我在 Angular 应用程序中需要加载器吗？
文章推荐： javascript - Amcharts v3 XY 不适用于对数刻度
行者123
个人简介

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

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