Raphael带文本标签可拖动的图形实现代码

最近准备学学Javascript和Raphaël，实现一个可拖动的矩形，另外矩形上还得显示标签。查了一下网上这个东西还比较冷门。Javascript才学没几天，代码估计写的很烂。


代码如下:

<!doctype html>
<html charset="utf-8">
<head>
<title>Raphaël - Connectivities</title>
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function Entity(r, l, t, w, h){
this.Label = r.text(l + w/2, t + h/2, "Hello World!");
this.Rectangle = r.rect(l, t, w, h, 10).attr({fill:"brown", stroke:"#666", title:"A Rectangle"}).drag(move, Dragger, up).data("cooperative", this.Label).toBack();
function Dragger(){
this.xx = this.attr("x");
this.yy = this.attr("y");
this.animate({"fill-opacity": .2}, 500);
}
function move(dx, dy){
var attr = {x: this.xx + dx, y: this.yy + dy};
this.attr(attr);
var lb = this.data("cooperative");
var attr1 = {x: this.xx + dx + this.attr("width") / 2, y: this.yy + dy + this.attr("height") / 2};
lb.attr(attr1);
}
function up(){
this.animate({"fill-opacity": 1}, 300);
}
}
window.onload = function(){
var r = Raphael("holder", 620, 420),discattr={fill:"red", stroke:"none"};
var entity1 = new Entity(r, 0, 0, 60, 40);
};
</script>
</head>
<body>
<div id="holder">
</div>
</body>
</html>

实现方法就是将Text作为Rectangle自定义属性，才能控制当拖动的时候，随着Rectangle一起移动。

赞 (0)

相关推荐

  • vue调用高德地图实例代码

    vue调用高德地图实例代码

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入 复制代码 代码如下: <script type="text/javascript" src=&q

  • raphael.js绘制中国地图 地图绘制方法

    raphael.js绘制中国地图 地图绘制方法

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

  • vue高德地图之玩转周边

    vue高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链家的周边,如图所示.  二 .原理分析 1.引入高德api,这个在之前的博客提到过,vue 调用高德地图. 2.使用地图的周边插件,这是  高德网站的api. AMap.PlaceSearch //地点搜索服务插件,提供某一特定地区的位置查询服务 在插件中的各种方法中选取了searchNearBy的

  • Map.vue基于百度地图组件重构笔记分享

    Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,

  • vue如何集成raphael.js中国地图的方法示例

    vue如何集成raphael.js中国地图的方法示例

    前言 raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官网地址: http://raphaeljs.com/ 因为最近的项目要用到中国地图,我需要的比较轻量级,所以没用echarts,选择的这个地图. 效果图 方法如下: 1.安装 npm install --save raphael 2.直接上代码 <template

  • vue基于Vue2.0和高德地图的地图组件实例

    前言 在做基于LBS的应用中,时常会和地图打交道,最直接的解决方案,当然是去对应的地图官网找文档,然后一步步来玩.对于简单场景而言,体验应该还好,但对于一些状态多,变化频繁的复杂场景而言,不仅要时刻维护本地数据状态和地图状态同步,还要查找设置各种状态的地图API,实在是让人头疼的事情. 设计vue-amap的初衷,也就是为了让开发者,在编写地图应用时,能从查找众多地图API和繁琐的地图状态同步中解脱出来. 那么vue-amap是如何做到的,又能给开发者带来怎样的便利与开发体验呢?我们就从一个轻点

  • Raphael带文本标签可拖动的图形实现代码

    最近准备学学Javascript和Raphaël,实现一个可拖动的矩形,另外矩形上还得显示标签.查了一下网上这个东西还比较冷门.Javascript才学没几天,代码估计写的很烂. 复制代码 代码如下: <!doctype html> <html charset="utf-8"> <head> <title>Raphaël - Connectivities</title> <script src="raphael

  • jQuery实现拖动效果的实例代码

    jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">

  • Java发送带html标签内容的邮件实例代码

    如下所示: package test; import javax.mail.internet.InternetAddress; import javax.mail.internet.MimeMessage; import javax.mail.internet.MimeUtility; import javax.mail.Session; import javax.mail.MessagingException; import javax.mail.Transport; public class

  • JS实现带圆弧背景渐变效果的导航菜单代码

    JS实现带圆弧背景渐变效果的导航菜单代码

    本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

  • Bootstrap弹出带合法性检查的登录框实例代码【推荐】

    Bootstrap弹出带合法性检查的登录框实例代码【推荐】

    最近做了一个项目其中有项目需求涉及到访问控制,在访问需要登录才能使用的页面或功能时,会弹出登录框: 效果如下: 图 1-点击用户名时,如未登录弹出登录框 对这个功能的详细描述: 不涉及到登录时,登录框隐藏 涉及到登录时,登录框弹出到页面左上角 登陆成功后登录框隐藏 实现思路: 在body结束标签之前插入登录的div,设其定位方式为absolute,位置在左上角. 登录框默认的display属性为none.触发登录时,将该属性改为block 附上示例代码: <!DOCTYPE html> <

  • PHP+AjaxForm异步带进度条上传文件实例代码

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: var object= { url:url, //form提交数据的地址 type:type, //form提交的方式(method:post/get) target:target, //服务器返回的响应数据显示的元素(Id)号 beforeSerialize:function(){} //序列化提交

  • Android拖动条的实现代码

    Android拖动条的实现代码

    本文实例为大家分享了Android拖动条的具体代码,供大家参考,具体内容如下 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="

  • jQuery窗口拖动功能的实现代码

    jQuery窗口拖动功能的实现代码

    具体代码如下所示: $("#showTitle").mousedown(function (e) { vbool = true; vHeight = e.pageY; vWidth = e.pageX; cHeight = vHeight - $("#show").offset().top; cWdith = vWidth - $("#show").offset().left; //alert("divshow" + $(&q

  • jquery简单实现带渐显效果的选项卡菜单代码

    jquery简单实现带渐显效果的选项卡菜单代码

    本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • 轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css

随机推荐