文档章节

Raphaël 鼠标拖动,滚轮缩放js代码

forluv83
 forluv83
发布于 2015/04/05 01:17
字数 156
阅读 567
收藏 9
$(window).load(function() {
	var p = Raphael('canvas');
	p.cx = 0, p.cy = 0, p.cs = 1;
	p.canvas.style.backgroundColor = '#008080';
	$(window).resize(function() {
		p.setSize($('#canvas').width(), $('#canvas').height());
	});
	$(p.canvas).on('mousedown', function(e) {
		if (e.target == p.canvas) {
			this.ox = e.offsetX;
			this.oy = e.offsetY;
		}
	});
	$(p.canvas).on('mousemove', function(e) {
		if (e.target == p.canvas && this.ox) {
			var size = p.getSize();
			p.cx = p.cx - (e.offsetX - this.ox) / p.cs;
			p.cy = p.cy - (e.offsetY - this.oy) / p.cs;
			p.setViewBox(p.cx, p.cy, size.width / p.cs, size.height / p.cs);
			this.ox = e.offsetX;
			this.oy = e.offsetY;
		}
	});
	$(p.canvas).on('mouseup', function(e) {
		if (e.target == p.canvas && this.ox) {
			delete this.ox;
			delete this.oy;
		}
	});
	$(p.canvas).on('mousewheel', function(e) {
		if (e.target == p.canvas) {
			var size = p.getSize();
			p.cs2 = e.originalEvent.wheelDelta > 0 ? p.cs * 1.125 : p.cs / 1.125;
			p.cx = p.cx + (e.offsetX / p.cs - e.offsetX / p.cs2);
			p.cy = p.cy + (e.offsetY / p.cs - e.offsetY / p.cs2);
			p.cs = p.cs2;
			p.setViewBox(p.cx, p.cy, size.width / p.cs, size.height / p.cs);
		}
		return false;
	});
	for (var i = 0; i < 200; i++) {
		var r = Math.random;
		p.rect(700 * r(), 500 * r(), 100 * r(), 100 * r()).attr('fill', '#00ffff');
	}
});


© 著作权归作者所有

共有 人打赏支持
forluv83
粉丝 3
博文 20
码字总数 5722
作品 0
东城
高级程序员
加载中

评论(2)

forluv83
forluv83

引用来自“湖心亭看雪”的评论

弱弱的问一句这个代码是做什么的?实现鼠标绘图?

类似百度地图上面,移动缩放地图的功能
湖心亭看雪
湖心亭看雪
弱弱的问一句这个代码是做什么的?实现鼠标绘图?
完全免费开源!开发者用了都说好的5款JavaScript图表库

用过不少的商用图表工具&图表库,比如Fusioncharts、AmChart,技术服务好,厂家的支持给力,总是物有所值。随着一些产品的开源,除了商用图表,现在也开始关注开源图表工具了。虽然和Fusionc...

周宇YuZhou
2015/07/02
0
0
Raphaël 基于html5绘制web图形的javascript插件

昨天在群里看到一个海归妹子的个人兼应聘作品网站(http://www.wendyshijia.com),遂一时引起众狼骚动,里面的设计和创意都教人赞叹,如此简历让人大呼过瘾,同时作为前端开发工作的一员倍感压...

_EKC
2012/10/25
0
0
强大的矢量图形库:Raphael JS 中文帮助文档及教程

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线...

李朝强
2013/10/24
0
1
GBin1分享使用Raphaël类库实现的超酷动画技能图表

发布时间:2011/08/09 编译:Terry li - GBin1.com 原文:tympanus.net 在这篇文章中GBin1将介绍如何使用Raphaël这个js类库构建图表。Raphaël是一个非常小的js类库用于构建丰富的矢量图形。...

gbin1
2011/08/09
893
0
给开发者提供的 35 款 JavaScript 图形图表库

图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”。几乎每个开发或者项目管理团队都需要图表或者图形来简化理解,可视化复杂的数据和 web 应用工作流...

oschina
2014/02/24
56K
13

没有更多内容

加载失败,请刷新页面

加载更多

05-《深度拆解Java虚拟机》之JVM是如何执行方法调用的?(下)

一、问题引入 我们知道,设计模式大量使用了虚方法来实现多态。但是虚方法的性能效率并不高,所以作者就想在此基础上写篇文章,评估每一种设计模式因为虚方法调用而造成的性能开销,并且在文...

飞鱼说编程
31分钟前
2
0
nginx统一入口 多服务出口

nginx配置多ip和端口统一调用入口log_format中$upstream_addr 标识打印转发的url地址配置upstream和locationhttp {include mime.types;default_type application/octet-stream...

GoldenVein
33分钟前
1
0
阿里P9架构师谈:高并发网站的监控系统选型、比较、核心监控指标

在高并发分布式环境下,对于访问量大的业务、接口等,需要及时的监控网站的健康程度,防止网站出现访问缓慢,甚至在特殊情况出现应用服务器雪崩等场景,在高并发场景下网站无法正常访问的情况...

我是你大哥
35分钟前
1
0
华为HiAI 助力苏宁易购,让你尽享完美视觉购物体验!

还在感慨商品照片与实物存在差距,又要退货? 还在抱怨被忽视的图片小细节,影响了生活品质? 想要“买买买”, 又担心海量的商品图片耗光你的流量? 就在近期 搭载HiAI能力的苏宁易购新版上线...

华为终端开放实验室
36分钟前
1
0
聊聊redisson的RMap的computeIfAbsent操作

序 本文主要研究一下redisson的RMap的computeIfAbsent操作 实例 @Test public void testRMapComputeIfAbsent(){ Config config = new Config(); config.useSingleS......

go4it
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部