程序员经验分享-hwhale

在画布中的鼠标位置放大/缩小

2024-05-03

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

缩放和平移是在draw通过 x、y 和缩放值进行函数操作，因此必须直接修改这些值（不能直接在画布上运行翻译）。这是Codepen https://codepen.io/anon/pen/BroZMb?editors=0010.

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)
window.mouseDragged = e => Controls.move(controls).mouseDragged(e);
window.mouseReleased = e => Controls.move(controls).mouseReleased(e)


class Controls {
  static move(controls) {
    function mousePressed(e) {
      controls.viewPos.isDragging = true;
      controls.viewPos.prevX = e.clientX;
      controls.viewPos.prevY = e.clientY;
    }

    function mouseDragged(e) {
      const {
        prevX,
        prevY,
        isDragging
      } = controls.viewPos;
      if (!isDragging) return;

      const pos = {
        x: e.clientX,
        y: e.clientY
      };
      const dx = pos.x - prevX;
      const dy = pos.y - prevY;

      if (prevX || prevY) {
        controls.view.x += dx;
        controls.view.y += dy;
        controls.viewPos.prevX = pos.x, controls.viewPos.prevY = pos.y
      }
    }

    function mouseReleased(e) {
      controls.viewPos.isDragging = false;
      controls.viewPos.prevX = null;
      controls.viewPos.prevY = null;
    }

    return {
      mousePressed,
      mouseDragged,
      mouseReleased
    }
  }

  static zoom(controls) {
    // function calcPos(x, y, zoom) {
    //   const newX = width - (width * zoom - x);
    //   const newY = height - (height * zoom - y);
    //   return {x: newX, y: newY}
    // }

    function worldZoom(e) {
      const {
        x,
        y,
        deltaY
      } = e;
      const direction = deltaY > 0 ? -1 : 1;
      const factor = 0.1;
      const zoom = 1 * direction * factor;

      controls.view.zoom += zoom;

      controls.view.x += -(x * direction * factor);
      controls.view.y += -(y * direction * factor);
    }

    return {
      worldZoom
    }
  }
}


class Circle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  show() {
    fill(255);
    noStroke();
    ellipse(this.x, this.y, 15, 15);
  }

  static create(count) {
    return Array.from(Array(count), () => {
      const x = random(-500, width + 500);
      const y = random(-500, height + 500);
      return new this(x, y);
    })
  }
}
body {margin: 0; padding: 0;}
canvas {vertical-align: top;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
function worldZoom(e) {
  const {x, y, deltaY} = e;
  const direction = deltaY > 0 ? -1 : 1;
  const factor = 0.1;
  const zoom = 1 * direction * factor;

  controls.view.zoom += zoom;

  controls.view.x += -(x * direction * factor);
  controls.view.y += -(y * direction * factor);
}

这是我尝试实现的一些类似问题：将画布缩放到鼠标光标 https://stackoverflow.com/questions/5189968/zoom-canvas-to-mouse-cursor, 放大一个点（使用缩放和平移） https://stackoverflow.com/questions/2916081/zoom-in-on-a-point-using-scale-and-translate


在我看来，缩放的工作方式是基于兴趣点的位置（在您的情况下是鼠标），缩放对(x, y)画布的位置。如果鼠标位于左上角，则该重量应该是(0,0)，如果它在右下角，它应该是(1,1)。而且中心应该是(0.5,0.5).

因此，假设我们有权重，每当缩放发生变化时，权重都会向我们显示画布的左上角距兴趣点有多远，我们应该将其移开weight*dimension*(delta zoom).

请注意，为了计算权重，我们需要考虑尺寸的放大/缩小值。所以如果宽度是100缩放是0.5，我们应该假设宽度是50。所以所有的值都是绝对的（因为鼠标(x,y)是绝对的）。

所以，就像：

function worldZoom(e) {
    const {x, y, deltaY} = e;
    const direction = deltaY > 0 ? -1 : 1;
    const factor = 0.01;
    const zoom = 1 * direction * factor;

    // compute the weights for x and y
    const wx = (x-controls.view.x)/(width*controls.view.zoom);
    const wy = (y-controls.view.y)/(height*controls.view.zoom);

    // apply the change in x,y and zoom.
    controls.view.x -= wx*width*zoom;
    controls.view.y -= wy*height*zoom;
    controls.view.zoom += zoom;
}

你可以尝试一下这个代码笔 https://codepen.io/amir-s/pen/jzqZdG?editors=0010.

或者更简单一点，内联计算权重：

controls.view.x -= (x-controls.view.x)/(controls.view.zoom)*zoom;
controls.view.y -= (y-controls.view.y)/(controls.view.zoom)*zoom;
controls.view.zoom += zoom;
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

canvas

p5js

在画布中的鼠标位置放大/缩小 的相关文章

随机推荐

  • 使用Linux虚拟鼠标驱动

    我正在尝试实施一个虚拟鼠标驱动程序根据基本 Linux 设备驱动程序书 有一个用户空间应用程序 它生成坐标以及内核模块 See 虚拟鼠标驱动程序和用户空间应用程序代码 http www embeddedlinux org cn Essent

  • 在 PowerShell 中通过 UDP 发送和接收数据

    我正在尝试编写一个脚本来使用 PowerShell 进行测试和应用 测试应包括通过 UDP 向远程服务器发送字符串 然后读取该服务器的响应并对结果执行某些操作 我需要的唯一帮助是脚本的中间两个步骤 发送字符串 然后 接收响应 在端口 UDP

  • 以管理员身份从 cmd 批处理运行 PowerShell 脚本

    我有一个 PowerShell 设置 我想在执行策略可能受到限制并且需要管理员权限的计算机上执行 理想情况下 我可以将其包装在 cmd 批处理中 如下所示 powershell Command Start Process powershel

  • 使用 BIC 准则运行逐步线性模型

    是否可以设置逐步线性模型来使用 BIC 标准而不是 AIC 我一直在尝试这个 但它仍然使用 AIC 值而不是 BIC 来计算每个步骤 null lm data 1 1 full lm data 1 age bmi gender group

  • 枚举和枚举类之间的区别[重复]

    这个问题在这里已经有答案了 谁能解释一下两者之间的区别 enum Type1 type2 And enum class Type1 type2 我经常使用前者 可能太频繁而没有足够的封装 但我从未使用过第二个例子 Thanks enum A

  • 基于嵌入属性验证 Mongoid 中的嵌入文档

    我有一个订阅者类 它有 embeds many 订阅 订阅具有属性状态 我想添加对状态的验证 以便每个订阅者只有一个订阅可以具有 活动 状态 订户可以拥有多个状态为 已购买 或 已过期 的订阅 这应该可以做到 class Subscribe

  • 独立于符号的字符串的模式匹配

    我需要一种算法 可以在数据中找到预定义的模式 以字符串的形式存在 独立于数据和模式的实际符号 字符 我只关心符号之间的关系 而不关心符号本身 数据中的同一符号具有不同的模式符号也是合法的 模式匹配算法必须强制执行的唯一一件事是保留模式中同一

  • 不允许为 VPC 创建 EC2 实例

    是否可以将 EC2 实例模板的 VPCId 定义为属性 我想做的是 Resources Ec2Instance Type AWS EC2 Instance Properties SecurityGroups Ref AWSSecurityG

  • 使用 pythons strftime 显示日期，例如“5 月 5 日”？ [复制]

    这个问题在这里已经有答案了 可能的重复 Python 日期顺序输出 https stackoverflow com questions 739241 python date ordinal output 在Python中 time strf

  • 在 Perl 中，如何从父进程向子进程发送消息（或信号），反之亦然？

    我正在编写一个管理多进程的程序 这就是我所做的 而且效果很好 但现在 我想将消息从子进程发送到父进程 反之亦然 从父进程到子进程 你知道最好的方法吗 你知道我所做的是否是我想要的正确方法 从子进程到父进程发送消息 信号或共享内存 反之亦然

  • 使用“nuxt build”时动态创建的类不可用 - tailwindcss nuxtjs

    我有一个 nuxtjs 项目 与 tailwindcss 一起使用 在该项目中 我动态生成负边距的类 如下所示 div class mins 1 div 整个项目在本地运行良好 但如果我运行nuxt build nuxt start 它的编

  • 有没有办法重新分区 Kafka 流中的输入主题？

    我有一个由 byte 键控的主题 我想对其进行重新分区并通过消息正文中字段中的另一个键处理该主题 我发现有KGroupedStream and groupby功能 但它需要一个聚合函数来转换为 KTable KStream 我不需要聚合 我

  • 即使我确实为变量设置了初始值，数据段也没有被初始化

    我已经编写了一个代码 该代码应该生成某种数字列表 但是即使我为它们分配了初始值 我的数据段变量也没有被初始化 This is how DS 0000 looks when I run it 这是我的代码 但数据段只保留垃圾值 MODEL s

  • 实体框架的状态模式

    我有一个模型Enquiry 它可以处于两种状态之一 还有更多状态 但出于此目的 我将仅比较两种状态 New and Closed 查询所处的状态取决于用户能够对查询执行什么操作 例如 无法删除已关闭的查询 而可以删除新的查询等等 基本示例

  • Windows Phone 8.1 应用程序多语言

    我正在使用 Visual Studio 2015 在 SilverLight 中创建 Windows Phone 应用程序 8 1 我正在用英语和阿拉伯语创建多语言应用程序 为此 我在项目中创建了 Strings 文件夹 其中包含 en U

  • 仅从 MySQL 中的日期时间 (YYYY-MM-DD HH:MM:SS) 中选择不同的日期

    执行此命令会带来以下结果 所有列中的所有日期 因此它本质上与 SELECT date 执行相同的操作 没有不同 SELECT DISTINCT date FROM daily ORDER BY date DESC 2013 02 12 16

  • 如何在 Android Studio 中为单独的模块生成签名的 APK？

    我的项目有 3 个模块 include app include videograbber include audiograbber 现在我想为Videograbber模块生成签名的APK 当我在 Android Studio 中使用 生成签

  • 自定义 UIAlertView？

    鉴于蓝色与我的 UI 界面不相配 我只是想知道是否有办法更改 uialertview 的颜色 或者使用图像代替 所有按钮 关闭 等仍然存在 Thanks CodeCropper 的优秀人员刚刚推出了一个开源控件 可让您创建自定义警报视图 这

  • Big O 用于有限、固定大小的可能值集

    这个问题 https stackoverflow com questions 12305028 java what is the best way to find first duplicate character in a string引

  • 在画布中的鼠标位置放大/缩小

    我正在尝试使用 p5 js 实现缩放功能 当前缩放级别以及 x 和 y 位置存储在controls view目的 默认位置或 0 0 位置位于左上角 问题是调整放大 缩小时的 x 和 y 位置值 以便无论视图的当前位置是什么 它都会停留在缩

热门标签