1

我正在为我的照片编辑器应用程序制作绘图工具。我设法制作了绘图工具。但是，由于我有多种工具，例如过滤器和文本，因此必须清除并重新绘制画布。我之前添加文本时必须这样做。这很容易，因为文本总是存储在一个函数中。因此，我可以在清除画布后调用该函数来重绘已经存在的东西。但是，绘制路径并不容易，因为路径永远不会保存在变量或函数中。我不知道我怎么能做到这一点。

我基本上希望以某种方式存储绘制的路径，以便我可以随时调用它们。然后它们应该以完全相同的方式出现在画布上。因为现在每当我使用其他工具时它们都会消失，因为我必须清除画布。

我正在使用香草 JS。

以下是 HTML 和 JavaScript 代码的必要部分：

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

var img;

function handleImage(e){
  var reader = new FileReader();
  reader.onload = function(event){
    img = new Image();
    img.onload = function(){
      var ratio = this.height / this.width;
      canvas.height = canvas.width * ratio;
      ctx.drawImage(img,0,0,canvas.width, canvas.height);
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}

var pos = { x: 0, y: 0 };

document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition);
document.addEventListener('mouseenter', setPosition);

function setPosition(e) {
  var rect = canvas.getBoundingClientRect();
  pos.x = e.clientX - rect.left
  pos.y = e.clientY - rect.top
}

function draw(e) {
    if (e.buttons !== 1) return;
    console.log(pos.x)
    ctx.beginPath();

    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#c0392b';

    ctx.moveTo(pos.x, pos.y);
    setPosition(e);
    ctx.lineTo(pos.x, pos.y);

    ctx.stroke();
}
<input type="file" id="imageLoader"/>
<div class="container" id="container">
  <canvas id="imageCanvas"></canvas>
</div>

4

1 回答 1

0

最简单的解决方案之一是保留辅助画布以保持您的像素操作。

这样的事情可能对你有用：

let canvas = document.getElementById("imageCanvas");
let canvasContext = canvas.getContext("2d");
let canvasShadow = canvas.cloneNode();
let canvasContextShadow = canvasShadow.getContext("2d");

function SaveCanvas() {
  canvasContextShadow.clearRect(0, 0, canvasShadow.width, canvasShadow.height);
  canvasContextShadow.drawImage(canvas, 0, 0);
}

function ResetCanvas() {
  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  canvasContext.drawImage(canvasShadow, 0, 0);
}
//Events
var pos = {
  x: 0,
  y: 0
};
document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition);
document.addEventListener('mouseenter', setPosition);
document.getElementById("reset").addEventListener('click', ResetCanvas);
document.getElementById("save").addEventListener('click', SaveCanvas);

function setPosition(e) {
  var rect = canvas.getBoundingClientRect();
  pos.x = e.clientX - rect.left;
  pos.y = e.clientY - rect.top;
}

function draw(e) {
  if (e.buttons !== 1)
    return;
  canvasContext.beginPath();
  canvasContext.lineWidth = 5;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = '#c0392b';
  canvasContext.moveTo(pos.x, pos.y);
  setPosition(e);
  canvasContext.lineTo(pos.x, pos.y);
  canvasContext.stroke();
}
canvas {
  background: #eee
}
<canvas id="imageCanvas" width="100" height="100"></canvas>
<button id="reset">Reset</button>
<button id="save">Save</button>

于 2021-04-07T09:51:28.047 回答