javascript - 如何在 Canvas 中获得更多光标位置

标签 javascript html5-canvas

这是我的代码:

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e) {
  let r = canvas.getBoundingClientRect();
  if (cursorPositions.length < 100) {
    cursorPositions.push({
      x: e.clientX - r.left,
      y: e.clientY - r.top
    });
  } else {
    for (let i = 0; i < cursorPositions.length - 1; i++)
      cursorPositions[i] = cursorPositions[i + 1];
    cursorPositions[99] = {
      x: e.clientX - r.left,
      y: e.clientY - r.top
    };
  }
  console.log(cursorPositions.length);
}

function draw() {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;

  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < cursorPositions.length; i++) {
    ctx.fillStyle = "#ffffff";
    ctx.beginPath();
    ctx.arc(cursorPositions[i].x, cursorPositions[i].y, 1, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  }
}

function loop() {
  draw();
  requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e) {
  getCursorPosition(e);
});
<canvas id="game"></canvas>

并输出:

OUTPUT CANVAS IMAGE

在此输出中，我以不同的速度移动光标，并且在远处的位置绘制了点。

我希望更频繁地获取光标位置，而不管光标速度如何，以便绘制连续的曲线。

最佳答案

您可以在两个点之间使用线性插值。 说dl是两点之间的最大距离

考虑A和B 

A---x---x---B

目标是分割[A; B]使得 x 以常规方式间隔，但间隔小于 dl

在下面的函数中


function interpolate(a, b, dl) {
  const n = d(a,b)/dl
  const nPoints = Math.ceil(n)-1 //1.5 one point middle, 2, one point middle too
  const dx = (b.x - a.x) / (nPoints + 1)
  const dy = (b.y - a.y) / (nPoints + 1)
  const arr = new Array(nPoints)
  for(let i = 1; i <= nPoints; ++i){
    const x = a.x + i*dx
    const y = a.y + i*dy
    arr[i-1] = { x, y }
  }
  return arr
}

插值就是这样做的。

唯一敏感的部分是

const nPoints = Math.ceil(n)-1
if n == 1+0.x, we must add only one point between A and B
if n == 2, we must add only one point
if n == 2+0.x, we must add two points

dx和dy变量只是定义 x 上的增量和y分别为计算出的x点

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e){
    let r = canvas.getBoundingClientRect();
    if(cursorPositions.length < 100){
        cursorPositions.push({
            x: e.clientX - r.left,
            y: e.clientY - r.top
        });
    }else{
        for(let i=0; i<cursorPositions.length-1; i++)
            cursorPositions[i] = cursorPositions[i+1];
        cursorPositions[99] = {
            x: e.clientX - r.left,
            y: e.clientY - r.top
        };
    }
}

function d(a, b){
  return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2)
}
function interpolate(a, b, dl) {
  const n = d(a,b)/dl
  const nPoints = Math.ceil(n)-1 //1.5 one point middle, 2, one point middle too
  const dx = (b.x - a.x) / (nPoints + 1)
  const dy = (b.y - a.y) / (nPoints + 1)
  const arr = new Array(nPoints)
  for(let i = 1; i <= nPoints; ++i){
    const x = a.x + i*dx
    const y = a.y + i*dy
    arr[i-1] = { x, y }
  }
  return arr
}
function draw(){
    const dl = 10 // 10px max dist between consecutive points
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if(cursorPositions.length == 0) return
    cursorPositions.reduce((last, cur) => {
        const n = d(last, cur)/dl
        if(n > 1){
          ctx.fillStyle = "red";
          interpolate(last, cur, dl).forEach(({ x, y }) => {
            ctx.beginPath();
            ctx.arc(x, y, 1, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();   
          })
        }
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(cur.x, cur.y, 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        return cur
    })
}

function loop(){
    draw();
    requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e){
    getCursorPosition(e);
});
<canvas id="game"></canvas>

正如op在他的帖子的最底部所问的那样，如果想要的行为是获得一条曲线，使得曲线是连续的，平滑曲线的更好方法是采取一些bezier curve .

下面是三次方的应用。遗憾的是它有点滞后，但希望通过优化一点也许它会更好

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e){
    let r = canvas.getBoundingClientRect();
    if(cursorPositions.length < 100){
        cursorPositions.push({
            x: e.clientX - r.left,
            y: e.clientY - r.top
        });
    }else{
      //keep the same points for each bezier curve
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.push({
          x: e.clientX - r.left,
          y: e.clientY - r.top
      })
    }
}

function d(a, b){
  return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2)
}
function b3([P0, P1, P2, P3]) {
  if(!P0 || !P1 || !P2 || !P3) return []
  function add(...v){
    return v.reduce((acc, P) => {
      acc.x += P.x
      acc.y += P.y
      return acc
    }, { x: 0, y: 0 })
  }
  function s(scale, P){
    return { x: P.x*scale, y: P.y*scale }
  }
  const B = t => add(s((1-t)**3, P0), s(3*t*(1-t)**2, P1), s(3*(1-t)*t**2, P2), s(t**3, P3))
  const nPoints = Math.ceil(d(P0, P1) + d(P1, P2) + d(P2, P3))
  const arr = new Array(nPoints)
  let t = 0
  for(let i = 0; i < nPoints; ++i){
    t += 1/nPoints
    arr[i] = B(t)
  }
  return arr
}
function draw(){
    const dl = 1 // 20px max dist between consecutive points
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if(cursorPositions.length == 0) return
    cursorPositions.reduce((last, cur, i) => {
        const n = d(last, cur)/dl
        if (n > 1 && i % 3 == 0) {
          ctx.fillStyle = "red";
          b3(cursorPositions.slice(i, i+4), dl).forEach(({ x, y }) => {
            ctx.beginPath();
            ctx.arc(x, y, 1, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();   
          })
        }
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(cur.x, cur.y, 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        return cur
    })
}

function loop(){
    draw();
    requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e){
    getCursorPosition(e);
});
<canvas id="game"></canvas>

edit2:最后可以使用可用的 api ctx.bezierCurveTo在我的机器上(不出所料)更快

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e){
    let r = canvas.getBoundingClientRect();
    if(cursorPositions.length < 100){
        cursorPositions.push({
            x: e.clientX - r.left,
            y: e.clientY - r.top
        });
    }else{
      //keep the same points for each bezier curve
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.push({
          x: e.clientX - r.left,
          y: e.clientY - r.top
      })
    }
}

function d(a, b){
  return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2)
}

function draw(){
    const dl = 1 // 20px max dist between consecutive points
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = 'white'
    if(cursorPositions.length == 0) return
    cursorPositions.reduce((last, cur, i) => {
        const n = d(last, cur)/dl
        if (n > 1 && i % 3 == 0) {
          const [P0, P1, P2, P3] = cursorPositions.slice(i, i+4)
          if(!P3) return cur
          ctx.beginPath();
          ctx.moveTo(P0.x, P0.y)
          ctx.bezierCurveTo(P1.x, P1.y, P2.x, P2.y, P3.x, P3.y)
          ctx.stroke();   
          ctx.closePath();
        }
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(cur.x, cur.y, 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        return cur
    })
}
function loop(){
    draw();
    requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e){
    getCursorPosition(e);
});
<canvas id="game"></canvas>

关于javascript - 如何在 Canvas 中获得更多光标位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59054770/

上一篇：javascript - 在 React.js 中使用相同的索引映射两个数组

下一篇：javascript - Chrome 中的时态

相关文章：

javascript - 将内联 onclick 事件与 jquery onclick 事件相结合

javascript - Ionic 2 iOS 10.3 - canvas.toDataURL() 错误 : the operation is insecure

jquery - HTML 5 Canvas 和 QR 码

javascript - Phaser 3 中移动蒙版的问题

css - Canvas 底部有空白并且滚动得太远

javascript - 使用 HTML5 Canvas 进行真正的等距投影

javascript - jQuery 严重计算元素的高度

javascript - 动态更新 url/html 标题时，如何获得类似 facebook 的按钮来注册更改？ (不是 fb :like) 中的 href

javascript - 如何为 table.rows.length 函数排除 html 表中的标题行？

javascript - 使用 img 标签自动调整大小或 Canvas 重绘来调整缩略图图像预览大小？

©2024 IT工具网  联系我们