文档章节

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

forluv83
 forluv83
发布于 2015/04/05 01:17
字数 156
阅读 552
收藏 9
点赞 0
评论 2
$(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
博文 19
码字总数 5721
作品 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
给开发者提供的 35 款 JavaScript 图形图表库

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

oschina
2014/02/24
56K
13
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
Raphaël JS 1.5.2 发布,JS绘图库

Raphaël 是一个小型的 JavaScript 库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。 示例代码: // Creates canvas 320 × 200 at...

红薯
2011/04/10
2.5K
1
JavaScript绘图库--Raphaël

Raphaël.js 是一个小型的 JavaScript 库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。 Raphaël.js使用SVGW3C推荐标准和VML作为创...

匿名
2009/09/07
23.1K
3
15 个构建交互式图表的最佳 jQuery 插件

在这篇文章中,我们向你推荐 15 个图表库,包含从简单图表实现到高度复杂的交互式图表,希望你会喜欢。 1. Chart.js : Charting Library with HTML5 Canvas 使用HTML5 Canvas元素的Javascrip...

oschina
2013/06/22
10.2K
9
开发者必备的 12 个 JavaScript 库

现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用Javascript,css 和 html 等,还要有自己的创意设计。为了方便大家发挥自己的创意,就产生了很多 JS 框架,Node.js扩展等等。有了这...

oschina
2014/01/31
6.5K
10
VS2010鲜为人知的新功能--带你全面接触VS2010

JS和标签的自动提示 在vs2010中,js代码和标签都加上了作用自动提示,就像在cs中的类成员提示一样。 签标 JS 2) 新增的控件 Web上 Winform 3) 源代码缩放 当我可以在CS代码上,按住Ctrl来滚动...

junwong
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

防火墙实例

3、一个包过滤防火墙实例 环境:redhat9 加载了string time等模块 eth0 接外网──ppp0 eth1 接内网──192.168.0.0/24 #!/bin/sh modprobe ipt_MASQUERADE modprobe ip_conntrack_ftp modp...

李超小牛子
3分钟前
0
0
TensorFlow 作用域与操作符的受限范围

variable_scope 影响变量和操作符 name_scope 只影响操作符 with tf.name_scope(""),使用空字符串将作用域返回到顶层 tf.variable_scope("") 相当于添加一个空层 import tensorflow as tf...

阿豪boy
13分钟前
0
0
Java面试基础篇——第六篇:常见Map类的区别

常见的map类有: HashMap, ConcurrentHashMap (Jdk1.8) , LinkedHashMap, TreeMap, Hashtable。 其中我们最常用的莫过于HashMap, 和并发情况下使用的ConcurrentHashMap了,它们的主要区别就在...

developlee的潇洒人生
15分钟前
0
0
崛起于Springboot2.X之前端模版freemaker(23)

1、配置文件 spring: freemarker: allow-request-override: false cache: true check-template-location: true charset: UTF-8 content-type: text/html ......

木九天
31分钟前
1
0
spring-boot:run启动时,指定spring.profiles.active

Maven启动指定Profile通过-P,如mvn spring-boot:run -Ptest,但这是Maven的Profile。 如果要指定spring-boot的spring.profiles.active,则必须使用mvn spring-boot:run -Drun.profiles=test......

夜黑人模糊灬
33分钟前
0
0
大数据分析挖掘技术学习:Python文本分类

引言 文本分类作为自然语言处理任务之一,被广泛应用于解决各种商业领域的问题。文本分类的目的是将 文本/文档 自动地归类为一种或多种预定义的类别。常见的文本分类应用如下: • 理解社交媒...

加米谷大数据
38分钟前
0
0
istio-0.8 指标监控,prometheus,grafana

配置: https://istio.io/docs/tasks/telemetry/metrics-logs/ https://istio.io/docs/tasks/telemetry/tcp-metrics/ envoy拦截请求>上报mixer>对接prometheus>grafana 效果截图: promethe......

xiaomin0322
39分钟前
0
0
公众号推荐

阿里技术 书籍:《不止代码》

courtzjl
42分钟前
0
0
关于改进工作效率

1.给不同的业务线建立需求群,所有的数据需求都在群里面提。 2.对于特别难搞定的事情,到对应的技术哪去做,有问题随时沟通。 3.定期给工作总结形成方法论。 4.学习新的技术,尝试用新的方法...

Avner
49分钟前
0
0
关于thinkphp 框架开启路径重写,无法获取Authorization Header

今天遇到在thinkphp框架中获取不到header头里边的 Authorization ,后来在.htaccess里面加多一项解决,记录下: <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews Rewrite......

殘留回憶
53分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部