canvas 鼠标位置缩放图形
最近再做 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 鼠标位置缩放图形的更多相关文章
- canvas绘图——根据鼠标位置进行缩放的实现原理
以任一点 A 缩放的基本原理: A 点为鼠标位置,正常放大是以原点放大,那么放大后 A 点就会变到 A1 点的位置 x1, y1.然后再将画布进行位移,将 A1 的位置移动到 A,则完成以 A 点缩放 ...
- canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上
canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) ...
- canvas获取鼠标位置
canvas获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 在WPF里面实现以鼠标位置为中心缩放移动图片
原文:在WPF里面实现以鼠标位置为中心缩放移动图片 在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面,介绍了如何在WPF里面移动和放大缩小图片, ...
- Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- jq获取鼠标位置
jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
- PCB Genesis 鼠标滚轮缩放与TGZ拖放 插件实现
一.背景: 做过CAM的人都用过Geneiss软件,由于处理资料强大,目前奥宝公司出品的Genesis占领整个PCB行业,整个行业无人不知呀, 而此软件有一个吐槽点Genesis 无滚轮缩放与TGZ拖 ...
- Qt——鼠标拖动缩放窗口源码
#ifndef MOVEWIDGET_H #define MOVEWIDGET_H #include <QWidget> #include <QEvent> class Mov ...
随机推荐
- .net持续集成cake篇之cake介绍及简单示例
cake介绍 Cake 是.net平台下的一款自动化构建工具,可以完成对.net项目的编译,打包,运行单元测试,集成测试甚至发布项目等等.如果有些特征Cake没有实现,我们还可以很容易地通过扩展Cak ...
- 学习4:内容# 1.列表 # 2.元祖 # 3.range
1.列表 列表 -- list -- 容器 有序,可变,支持索引 列表: 存储数据,支持的数据类型很多 字符串,数字,布尔值,列表,集合,元祖,字典, 定义一个列表 lst = ["dsb& ...
- MyBatis select标签的用法
From<MyBatis从入门到精通> 第一步,在接口中添加方法: public interface UserMapper { SysUser selectById(Long id); } ...
- .NET CORE 多语言实现方案
根据市场需求,基于.NET CORE平台开发的RoadFlow工作流平台需要实现多语言版本.经过方案讨论和比对,决定采用.NET自带的本地化功能来实现多语言.话不多说,直接上实现方式. 首先修改Sta ...
- nginx解析漏洞复现
nginx解析漏洞复现 一.漏洞描述 该漏洞与nginx.php版本无关,属于用户配置不当造成的解析漏洞 二.漏洞原理 1. 由于nginx.conf的如下配置导致nginx把以’.php’结尾的文件 ...
- [leetcode] 456. 132 Pattern (Medium)
对一个三个元素以上的数组,如果存在1-3-2模式的组合,则返回true. 1-3-2模式就是值的排序是i<k<j但是下标排序是i<j<k. 解法一: 硬解,利用一个变量存储是否 ...
- Django自带的后台管理系统
1.准备工作: 1-1.创建django项目和应用 1-2.修改settings.py配置文件: #应用配置: INSTALLED_APPS = [ 'django.contrib.admin', ' ...
- golang 时间转换的问题
一般在获取到时间字符串,需要将时间字符串格式化为golang的"time.Time"对象的时候,通常有2个函数,分别是. time.Parse(layout, value stri ...
- spark 源码分析之六--Spark RPC剖析之Dispatcher和Inbox、Outbox剖析
在上篇 spark 源码分析之五 -- Spark内置RPC机制剖析之一创建NettyRPCEnv 中,涉及到了Diapatcher 内容,未做过多的剖析.本篇来剖析一下它的工作原理. Dispatc ...
- LeetCode 解题目录
0001. 两数之和(Java) 0003. 无重复字符的最长子串(Java) 0172. 阶乘后的零 (Java) 0287. 寻找重复数(Java)