首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Canvas鼠标滚轮缩放以及画布拖动(图文并茂版)

Canvas鼠标滚轮缩放以及画布拖动 本文会带大家认识Canvas中常用的坐标变换方法 translate 和 scale,并结合这两个方法,实现鼠标滚轮缩放以及画布拖动功能。...Canvas的坐标变换 Canvas 绘图的缩放以及画布拖动主要通过 CanvasRenderingContext2D 提供的 translate 和 scale 两个方法实现的,先来认识下这两个方法。...scale 实现鼠标拖动画布 效果 创建Sence类 Sence类: class Scene { constructor(id, options = { width: 600, height...this.x = x; this.y = y; } } } 画布拖动的整体思路就是利用前面介绍的 Canvas 的 translate 方法。...this.ctx.scale(this.scale, this.scale); this.draw(); } 总结 本文从基础原理到代码实现,完整给大家讲解了 Canvas 画布绘制中经常会遇到的画布拖动鼠标滚轮缩放功能

1.5K10

Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

offsetX = (int) (pointer_x - canvasX); offsetY = (int) (pointer_y - canvasY); } 二、绘制超大图像 + 鼠标拖动...+ 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ---- 1、代码示例 import javax.swing.*; import java.awt.*; import java.awt.event.MouseAdapter...; import java.awt.event.MouseEvent; import java.awt.event.MouseWheelEvent; import java.awt.event.MouseWheelListener...addMouseMotionListener(new MouseAdapter() { // 鼠标拖动事件 public void mouseDragged...Graphics2D g2 = (Graphics2D)g; // 缩放画布 //g2.scale(scale, scale); // 拖动画布

2.7K10
领券