logo标签列表

在鼠标位置放大p5.js（包括jsfiddle）

javascriptgeometryzoomingp5.js
7
我将尝试在鼠标位置缩放，就像在 Google 地图上一样。它有点起作用，但会使我想要缩放的点与原始位置对齐，然后当我在该点缩放时，它就正常工作了。我认为我需要将该点转换回鼠标位置，但我不确定如何确切地做到这一点。
这是绘制之前的代码：
  translate(zoomLocation.x, zoomLocation.y);
  scale(zoom);
  translate(-zoomLocation.x, -zoomLocation.y);
  drawGrid();

当我缩放时：

  event.preventDefault();
  zoomLocation = {
    x: zoomLocation.x + (mouseX - zoomLocation.x) / zoom,
    y: zoomLocation.y + (mouseY - zoomLocation.y) / zoom
  };
  zoom -= zoomSensitivity * event.delta;


let colors = {
  background: 0,
  gridLines: "white"
};

let nVariables = 4;

let zoom = 1;
let zoomLocation = {
  x: 0,
  y: 0
};
let zoomSensitivity = 0.0002;

function draw() {
  translate(zoomLocation.x, zoomLocation.y);
  scale(zoom);
  translate(-zoomLocation.x, -zoomLocation.y);
  drawGrid();


  stroke("blue");
  ellipse(zoomLocation.x + (mouseX - zoomLocation.x) / zoom, zoomLocation.y + (mouseY - zoomLocation.y) / zoom, 10, 10);

  stroke("red");
  ellipse(zoomLocation.x, zoomLocation.y, 10, 10);

}

function setup() {
  zoomLocation = {
    x: 0,
    y: windowHeight / 2
  }
  createCanvas(windowWidth, windowHeight);
}

function mouseWheel(event) {
  event.preventDefault();
  let oldZoom = zoom;
  zoomLocation = {
    x: zoomLocation.x + (mouseX - zoomLocation.x) / zoom,
    y: zoomLocation.y + (mouseY - zoomLocation.y) / zoom
  };
  zoom -= zoomSensitivity * event.delta;
}

function drawGrid() {
  let nCells = 2 ** nVariables;
  if (nCells > 2048) {
    if (!window.confirm(`You are about to create ${nCells} cells. This might lag your browser. Are you sure?`)) {
      return;
    }
  }
  background(colors.background);
  let gridWidth = windowWidth - 2;
  let gridHeight = min(gridWidth / nCells, windowHeight / 2 - 2);
  let gridY = windowHeight / 2;
  stroke(colors.gridLines);
  line(0, gridY, gridWidth, gridY);
  line(0, gridY + gridHeight, gridWidth, gridY + gridHeight);
  for (let i = 0; i < nCells + 1; i++) {
    line(i * (gridWidth / nCells), gridY, i * (gridWidth / nCells), gridY + gridHeight)
  }

  let curveHeight = 2;

  let drawVariable = (n) => {
    let p1 = {
      x: 1 / (2 ** (n + 1)) * gridWidth,
      y: gridY
    };
    let c1 = {
      x: p1.x,
      y: p1.y + gridWidth / (2 ** n) * curveHeight
    };
    let p2 = {
      y: p1.y
    };
    let c2 = {
      y: c1.y
    };;
    noFill();
    stroke("red");
    if (n == 0) {
      p2.x = gridWidth;
      c2.x = p2.x;
      c1.y = c2.y = p1.y + gridWidth / 2 * curveHeight;
      curve(c1.x, c1.y, p1.x, p1.y, p2.x, p2.y, c2.x, c2.y);
      return;
    }
    for (let i = 3; i < 2 ** (n + 1); i += 2) {
      p2.x = i / (2 ** (n + 1)) * gridWidth
      c2.x = p2.x;
      if ((i - 3) % 4 == 0) {
        curve(c1.x, c1.y, p1.x, p1.y, p2.x, p2.y, c2.x, c2.y);
      } else {
        p1.x = p2.x;
        c1.x = c2.x;
      }
    }
  };

  for (let i = 0; i < nVariables; i++) {
    drawVariable(i);
  }
}
body {
  margin: 0
}

button {
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

1
你想要达到什么效果？ - Ayush Seth
1
鼠标下的点应该保持在屏幕上的同一位置，就像在谷歌地图中缩放一样。 - Kys Plox
1
这个问题应该有更多的活动。我非常需要它。 - J-Cake
1个回答
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接