Question

我正在实现图像处理工具，我想从鼠标单击画布上的图像中删除背景。

我的画布自动设置为适合Windows。如果图像太大，则会自动缩小以适合视口。

现在，当我的画布缩小时，我的图像变得模糊。我正在使用以下代码计算鼠标的位置：

context

但是这里的问题是我的what也和画布大小一样小（缩小），因此我图像的像素数据是小图像，这可能导致最终输出模糊。

经过大量的搜索和思考，我发现一个解决方案是，如果我们将上下文缩放到原始图像大小，请执行以下操作。仅调整画布大小，然后清除最终输出。

现在的问题是我的鼠标位置根据缩放后的画布而定。因此，必须计算鼠标在画布原始尺寸中的位置，才能在缩放的画布中获得正确的像素。但是我不知道如何计算缩放画布中指针的位置是原始大小画布或上下文中的位置。

请参阅下图以了解更多信息： $replaceRange

此处原始尺寸的画布不会显示给用户。但是删除像素的过程是在原始大小的画布上进行的。

整个场景（上图）

向用户显示小（zoomedOut）画布。
用户从该画布（图像）中选择像素。
我们首先获得鼠标指针在缩放的画布（图像）上的位置。
如果我们将向外扩展的画布缩放到原始大小的画布，现在let headers = [ "cache-control": "no-cache" ] let login = "" let password = "" let request = NSMutableURLRequest(url: NSURL(string: urlString)! as URL, cachePolicy: .reloadIgnoringLocalAndRemoteCacheData, timeoutInterval: 10.0) request.httpMethod = "GET" request.allHTTPHeaderFields = headers let config = URLSessionConfiguration.default let loginData = String(format: "%@:%@", login, password).data(using: String.Encoding.utf8)! let base64EncodedCredential = loginData.base64EncodedString() let authString = "Basic \(base64EncodedCredential)" config.httpAdditionalHeaders = ["Authorization" : authString] let session = URLSession.shared let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in if (error != nil) { print(error!) } else { let httpResponse = response as? HTTPURLResponse print(httpResponse!) let responseData = String(data: data!, encoding: String.Encoding.utf8) print(responseData!) } }) dataTask.resume()的鼠标指针在原始画布中的位置会是什么？

这第四步是我不知道怎么做的计算？

请帮助我。

Answer 1

如果您打算使用CSS缩放画布，则可以使用此功能来获取鼠标在画布上的位置。首先，您将比例计算为画布的初始大小和缩放后的画布大小之间的融洽关系。接下来，您需要重新计算鼠标在画布上的位置。

function oMousePosScaleCSS(canvas, evt) {
      let ClientRect = canvas.getBoundingClientRect(), 
          scaleX = canvas.width / ClientRect.width,
          scaleY = canvas.height / ClientRect.height; 
          return {
          x: (evt.clientX - ClientRect.left) * scaleX, 
          y: (evt.clientY - ClientRect.top) * scaleY 
      }
    }

请参见工作示例：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 150;
let ch = canvas.height = 150;


function oMousePosScaleCSS(canvas, evt) {
  let ClientRect = canvas.getBoundingClientRect(), 
      scaleX = canvas.width / ClientRect.width,
      scaleY = canvas.height / ClientRect.height; 
      return {
      x: (evt.clientX - ClientRect.left) * scaleX, 
      y: (evt.clientY - ClientRect.top) * scaleY 
  }
}


let last = {}

canvas.addEventListener("mousedown", (e)=>{
  m = oMousePosScaleCSS(canvas, e)
  
  ctx.clearRect(0,0,cw,ch);

  last.x = m.x;
  last.y = m.y;
  
  
 
});

canvas.addEventListener("mouseup", (e)=>{
last={}

});


canvas.addEventListener("mousemove", (e)=>{
  if(last.x){
   m = oMousePosScaleCSS(canvas, e)
   
    
    ctx.beginPath();
    ctx.moveTo(last.x,last.y);
    ctx.lineTo(m.x,m.y);
    ctx.stroke();
    
    
    last.x = m.x;
    last.y = m.y;
    
  }
  

})

canvas {
  border:1px solid #d9d9d9;
  display: block;
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  /***********************/
  transform: scale(.75, .75);
  /***********************/
}

<canvas id="canvas"></canvas>

如何计算鼠标指针在画布中的位置？

整个场景（上图）

1 个答案: