最近再做 webcad , 需要在 canvas  上对图形进行缩放,主要分为以下几个步骤:

1、找到当前光标所在位置,确定其在相对 canvas 坐标系的坐标

  绑定鼠标滚轮事件,假定每次缩放比例 0.2

  求鼠标相对坐标 p0

2、图形由点组成,对每个点进行矩阵变换,得到变换后的坐标,假设图中一点为 p1:

  v1 = p1 - p0   // 将 p0 作为变换图形的原点

  p1 = v1.scale(x_ratio, y_ratio)   // 缩放

  p1 = p1 + p0                       // 还原坐标点

3、清除当前图形,绘制新图形

通过以上步骤可实现以鼠标当前位置为中心,缩放图像。 以上为实现的基本思路, 代码后期补上。

canvas 鼠标位置缩放图形的更多相关文章

  1. canvas绘图——根据鼠标位置进行缩放的实现原理

    以任一点 A 缩放的基本原理: A 点为鼠标位置,正常放大是以原点放大,那么放大后 A 点就会变到 A1 点的位置 x1, y1.然后再将画布进行位移,将 A1 的位置移动到 A,则完成以 A 点缩放 ...

  2. canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

    canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) ...

  3. canvas获取鼠标位置

    canvas获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. 在WPF里面实现以鼠标位置为中心缩放移动图片

    原文:在WPF里面实现以鼠标位置为中心缩放移动图片 在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面,介绍了如何在WPF里面移动和放大缩小图片, ...

  5. Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  6. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. HTML5 Canvas鼠标与键盘事件

    演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...

  8. PCB Genesis 鼠标滚轮缩放与TGZ拖放 插件实现

    一.背景: 做过CAM的人都用过Geneiss软件,由于处理资料强大,目前奥宝公司出品的Genesis占领整个PCB行业,整个行业无人不知呀, 而此软件有一个吐槽点Genesis 无滚轮缩放与TGZ拖 ...

  9. Qt——鼠标拖动缩放窗口源码

    #ifndef MOVEWIDGET_H #define MOVEWIDGET_H #include <QWidget> #include <QEvent> class Mov ...

随机推荐

  1. .net持续集成cake篇之cake介绍及简单示例

    cake介绍 Cake 是.net平台下的一款自动化构建工具,可以完成对.net项目的编译,打包,运行单元测试,集成测试甚至发布项目等等.如果有些特征Cake没有实现,我们还可以很容易地通过扩展Cak ...

  2. 学习4:内容# 1.列表 # 2.元祖 # 3.range

    1.列表 列表 -- list -- 容器 有序,可变,支持索引 列表: 存储数据,支持的数据类型很多 字符串,数字,布尔值,列表,集合,元祖,字典, 定义一个列表 lst = ["dsb& ...

  3. MyBatis select标签的用法

    From<MyBatis从入门到精通> 第一步,在接口中添加方法: public interface UserMapper { SysUser selectById(Long id); } ...

  4. .NET CORE 多语言实现方案

    根据市场需求,基于.NET CORE平台开发的RoadFlow工作流平台需要实现多语言版本.经过方案讨论和比对,决定采用.NET自带的本地化功能来实现多语言.话不多说,直接上实现方式. 首先修改Sta ...

  5. nginx解析漏洞复现

    nginx解析漏洞复现 一.漏洞描述 该漏洞与nginx.php版本无关,属于用户配置不当造成的解析漏洞 二.漏洞原理 1. 由于nginx.conf的如下配置导致nginx把以’.php’结尾的文件 ...

  6. [leetcode] 456. 132 Pattern (Medium)

    对一个三个元素以上的数组,如果存在1-3-2模式的组合,则返回true. 1-3-2模式就是值的排序是i<k<j但是下标排序是i<j<k. 解法一: 硬解,利用一个变量存储是否 ...

  7. Django自带的后台管理系统

    1.准备工作: 1-1.创建django项目和应用 1-2.修改settings.py配置文件: #应用配置: INSTALLED_APPS = [ 'django.contrib.admin', ' ...

  8. golang 时间转换的问题

    一般在获取到时间字符串,需要将时间字符串格式化为golang的"time.Time"对象的时候,通常有2个函数,分别是. time.Parse(layout, value stri ...

  9. spark 源码分析之六--Spark RPC剖析之Dispatcher和Inbox、Outbox剖析

    在上篇 spark 源码分析之五 -- Spark内置RPC机制剖析之一创建NettyRPCEnv 中,涉及到了Diapatcher 内容,未做过多的剖析.本篇来剖析一下它的工作原理. Dispatc ...

  10. LeetCode 解题目录

    0001. 两数之和(Java) 0003. 无重复字符的最长子串(Java) 0172. 阶乘后的零 (Java) 0287. 寻找重复数(Java)