相关疑难解决方法(0)

对于另一个问题,我编写了这个答案,包括这个示例代码.

在该代码中,我使用鼠标滚轮来放大/缩小HTML5 Canvas.我找到了一些代码来规范Chrome和Firefox之间的速度差异.但是,Safari中的缩放处理要比其中任何一个快得多.

这是我目前的代码:

var handleScroll = function(e){
  var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
  if (delta) ...
  return e.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
canvas.addEventListener('mousewheel',handleScroll,false);     // Everyone else

在Chrome v10/11,Firefox v4,Safari v5,Opera v11和IE9上滚动相同数量的鼠标滚轮时,我可以使用哪些代码来获得相同的"delta"值？

这个问题是相关的,但没有好的答案.

编辑:进一步调查显示一个滚动事件'up'是:

                  | evt.wheelDelta | evt.detail
------------------+----------------+------------
  Safari v5/Win7  |       120      |      0
  Safari v5/OS X  |       120      |      0
  Safari v7/OS X  |        12      |      0
 Chrome v11/Win7  |       120 …

我正在寻找HTML5 Canvas或任何JS库的世界地图的开源实现.我需要简单的矢量世界地图与景观和缩放.如果它适用于iOS/Android/BB OS会很好.

http://cartagen.org/对我来说太多了.

我在将容器缩放到固定点时遇到了一些问题.
在我的情况下,我正在尝试将一个舞台缩放(缩放)到鼠标光标.

以下是纯画布的一种方法:http: //phrogz.net/tmp/canvas_zoom_to_cursor.html(在Zoom Canvas到Mouse Cursor中讨论过)

在使用KineticJS API时,我无法弄清楚如何应用相同的逻辑.

示例代码:

var position = this.stage.getUserPosition();
var scale = Math.max(this.stage.getScale().x + (0.05 * (scaleUp ? 1 : -1)), 0);
this.stage.setScale(scale);
// Adjust scale to position...?
this.stage.draw();

我试图在画布上创建缩放效果,我已经设法做到了,但是有一个小问题.缩放(缩放)原点位于画布的左上角.如何指定缩放/缩放原点？

我想我需要使用,translate但我不知道应该如何以及在哪里实现它.

我想用作缩放原点的是鼠标位置,但为简单起见,画布的中心可以.

的jsfiddle

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;

var global = {
  zoom: {
    origin: {
      x: null,
      y: null,
    },
    scale: 1,
  },
};

function zoomed(number) {
  return Math.floor(number * global.zoom.scale);
}

function draw() {
  context.beginPath();
  context.rect(zoomed(50), zoomed(50), zoomed(100), zoomed(100));
  context.fillStyle = 'skyblue';
  context.fill();

  context.beginPath();
  context.arc(zoomed(350), zoomed(250), zoomed(50), 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
}

draw();

canvas.addEventListener("wheel", trackWheel);
canvas.addEventListener("wheel", zoom);

function zoom() {
  context.setTransform(1, …

有一些关于缩放图像的帖子（例如HTML5 Canvas Image Scaling Issue）；然而，我需要深入了解以平滑的方式快速缩放数百个简单的绘制元素（正方形、线条、弧线等）。我希望它看起来像一个动画，现在使用鼠标滚轮缩放（以 0.05 增量缩放），过渡是不稳定的。

优化画布中有一个有趣的见解，建议在屏幕外画布上进行预渲染，但这可能会导致浏览器中的内存问题（我们已经在突破限制）。

以下是包含数百个绘制元素的工程原理图示例：

谢谢！

我有一张地图.我希望用户能够缩放和平移地图.想象一下谷歌地图,但不是无限地平移,地图是一个正方形(如果你超越它的边缘,它不会再次环绕).

我使用scale()和实现了缩放和平移translate().这些都很好用.

我被困在最后一部分 - 当用户放大时,我想围绕该点居中放大.很难用文字解释,所以想象一下当你在谷歌地图中鼠标轮时会发生什么 - 这就是我想要的.

我已经在标题中查看了关于SO的每个答案.大多数是这个的变体,基本上说这是我需要做的:

ctx.translate(/* to the point where the mouse is */);
ctx.scale(/* to zoom level I want */)
ctx.translate(/* back to the point where the mouse was, taking zoom into account */);

然而,无论我做什么,我似乎无法让它工作.我可以让它在缩放后缩放到特定点,但无论我做什么,我都无法使该点等于鼠标指针所在的位置.

看看这个小提琴.想象一下,广场是一张地图,圆圈是国家或其他什么.

我找到的最佳实现是这个SO答案和链接的例子.但是,代码使用了SVG和.createSVGMatrix()各种各样的东西,坦率地说,我无法理解.如果可能的话,我更喜欢全画布解决方案.

显然我对使用库这样做不感兴趣.我想明白为什么我所做的不起作用.

我正在努力找出并确定如何根据此示例放大我的鼠标位置。（https://stackblitz.com/edit/js-fxnmkm?file=index.js）

let node,
    scale = 1,
    posX = 0,
    posY = 0,
    node = document.querySelector('.frame');

const render = () => {
  window.requestAnimationFrame(() => {
    let val = `translate3D(${posX}px, ${posY}px, 0px) scale(${scale})`
    node.style.transform = val
  })
}

window.addEventListener('wheel', (e) => {
  e.preventDefault();

  // Zooming happens here
  if (e.ctrlKey) {
    scale -= e.deltaY * 0.01;
  } else {
    posX -= e.deltaX * 2;
    posY -= e.deltaY * 2;
  }

  render();
});

我想要的效果是基于这个例子（https://codepen.io/techslides/pen/zowLd?editors=0010）放大时。目前我上面的例子只缩放到“视口”的中心，但我希望它是我的光标当前所在的位置。

我已经在高低搜索了一个不是通过画布实现的解决方案。任何帮助，将不胜感激！

警告我使用滚轮事件的原因是为了模仿 Figma（设计工具）平移和缩放的交互。

我需要在基于 Web 的应用程序中显示一个大矩阵。矩阵尺寸约为。1000*1000，每个单元格要么被填充，要么不被填充。

基本上，它应该是这样的（更大而且没有颜色）：http : //mbostock.github.com/protovis/ex/matrix.html

我需要基本的交互，例如缩放和单击单元格。该矩阵很可能是一个稀疏矩阵。

我尝试过 Protovis，但如果矩阵大于 80*80，则渲染需要永远。

什么 Javascript 库可能适合此任务？

我有一张画布，上面有一堆物体。我有一个缩放函数，可以增加一个zoom变量，每个坐标都乘以该变量。

我希望能够指向一个坐标并对其进行缩放，类似于在线地图的操作方式。

我在这里设置了一个演示，展示了我的代码的当前状态。

我正在尝试使用 p5.js 实现缩放功能。当前缩放级别以及 x 和 y 位置存储在controls.viewobject. 默认或 (0, 0) 位置在左上角。问题是在放大/缩小时调整 x 和 y 位置值，以便无论视图的当前位置是什么，它都会停留在缩放点或鼠标光标处。

缩放和平移在draw函数中由 x、y 和缩放值执行，因此必须直接修改这些值（不能直接在画布上运行平移）。这是Codepen。

let canvas, circles;
const controls = {
  view: {
    x: 0,
    y: 0,
    zoom: 1
  },
  viewPos: {
    prevX: null,
    prevY: null,
    isDragging: false
  },
}

function setup() {
  canvas = createCanvas(window.innerWidth, window.innerHeight);
  canvas.mouseWheel(e => Controls.zoom(controls).worldZoom(e))
  circles = Circle.create(100)
}

function draw() {
  background(100)
  translate(controls.view.x, controls.view.y);
  scale(controls.view.zoom)
  circles.forEach(circle => circle.show());
}

window.mousePressed = e => Controls.move(controls).mousePressed(e) …