Question

我在尝试创建易于使用的图像编辑器时遇到了一个小问题，您可以在图像上添加多个可拖动文本，然后按原始分辨率将编辑后的图像保存为文本。

其他一切正常，但我希望能够在非全高清分辨率画布（如800x600px）上编辑全高清图像和更大图像

我不能在画布上使用像1920x1080或更大的分辨率，因为它将是大规模的并且超出浏览器（滚动条）的边界，并且也不会非常容易管理。

我尝试在画布上使用百分比值，看起来没问题，但文字点击框在拖动时不会跟随光标。

处理此问题的任何提示或技巧？

以下是使用1920x1080 canvas＆amp; amp;全高清图像。我想将图像和功能拟合到一个..让我们说800x600画布，但保存输出为原始的全高清。

<canvas id="canvas" width=1920 height=1080></canvas>

function draw() {
  //ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(imageObj, 0, 0, 1920, 1080);
  for (var i = 0; i < texts.length; i++) {
    var text = texts[i];
    ctx.fillText(text.text, text.x, text.y);
  }
}

https://jsfiddle.net/n0mn7bcg/

// canvas related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// variables used to get mouse position on the canvas
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

var imageObj = new Image();
imageObj.src = 'https://4.bp.blogspot.com/-lQwIDyafEbI/UxNch2499rI/AAAAAAAAogo/FfZxYSCIXxc/s0/Ships+in+from+the+bottle_2_HD.jpg';

// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;

// an array to hold text objects
var texts = [];

// this var will hold the index of the hit-selected text
var selectedText = -1;

// clear the canvas & redraw all texts
function draw() {
  //ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(imageObj, 0, 0, 1920, 1080);
  for (var i = 0; i < texts.length; i++) {
    var text = texts[i];
    ctx.fillText(text.text, text.x, text.y);
  }
}

// test if x,y is inside the bounding box of texts[textIndex]
function textHittest(x, y, textIndex) {
  var text = texts[textIndex];
  return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}

// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
function handleMouseDown(e) {
  e.preventDefault();
  startX = parseInt(e.clientX - offsetX);
  startY = parseInt(e.clientY - offsetY);
  // Put your mousedown stuff here
  for (var i = 0; i < texts.length; i++) {
    if (textHittest(startX, startY, i)) {
      selectedText = i;
    }
  }
}

// done dragging
function handleMouseUp(e) {
  e.preventDefault();
  selectedText = -1;
}

// also done dragging
function handleMouseOut(e) {
  e.preventDefault();
  selectedText = -1;
}

// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
function handleMouseMove(e) {
  if (selectedText < 0) {
    return;
  }
  e.preventDefault();
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  // Put your mousemove stuff here
  var dx = mouseX - startX;
  var dy = mouseY - startY;
  startX = mouseX;
  startY = mouseY;

  var text = texts[selectedText];
  text.x += dx;
  text.y += dy;
  draw();
}

// listen for mouse events
$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
  handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
  handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
  handleMouseOut(e);
});

$("#submit").click(function() {

  // calc the y coordinate for this text on the canvas
  var y = texts.length * 20 + 20;

  // get the text from the input element
  var text = {
    text: $("#theText").val(),
    x: 20,
    y: y
  };

  // calc the size of this text for hit-testing purposes
  ctx.font = "80px consolas";
  text.width = ctx.measureText(text.text).width;
  text.height = 80;

  // put this new text in the texts array
  texts.push(text);

  // redraw everything
  draw();

});

body {
  background: #f3f3f3;
}

#canvas {
  border: 1px solid red;
}

#theText {
  width: 10em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Add text to canvas and drag it</h4>
<input id="theText" type="text">
<button id="submit">Draw text on canvas</button>
<br>
<canvas id="canvas" width=1920 height=1080></canvas>

Answer 1

如果你在mousedown和mousemove事件处理程序中使用e.pageX，它会起作用：

https://jsfiddle.net/n0mn7bcg/2/

function handleMouseDown(e) {
  e.preventDefault();
  startX = parseInt(e.pageX - offsetX);
  startY = parseInt(e.pageY - offsetY);
  // Put your mousedown stuff here
  for (var i = 0; i < texts.length; i++) {
    if (textHittest(startX, startY, i)) {
      selectedText = i;
    }
  }
}

 function handleMouseMove(e) {
  if (selectedText < 0) {
    return;
  }
  e.preventDefault();
  mouseX = parseInt(e.pageX - offsetX);
  mouseY = parseInt(e.pageY - offsetY);

  // Put your mousemove stuff here
  var dx = mouseX - startX;
  var dy = mouseY - startY;
  startX = mouseX;
  startY = mouseY;

  var text = texts[selectedText];
  text.x += dx;
  text.y += dy;
  draw();
}

更多信息：What is the difference between screenX/Y, clientX/Y and pageX/Y?

缩小图像上的HTML Canvas可拖动文本

1 个答案: