导航:首页 > 文件教程 > raphaeljs教程

raphaeljs教程

发布时间:2023-01-16 03:25:43

❶ 怎样把svg文档转换成raphael js代码 或者给个raphael js的教程,中文文档也行。

raphael-svg-import 据说来这自个可以

https://github.com/wout/raphael-svg-import

jQuery(document).ready(function(){
jQuery.ajax({
type: "GET",
url: "assets/demo.svg",
dataType: "xml",
success: function(svgXML) {
var paper = Raphael(10, 10, 800, 600);
var newSet = paper.importSVG(svgXML);
}
});
});

❷ Raphael js 怎么加载vml的数据

raphael-svg-import

❸ <script src="js/raphael.2.1.0.min.js"></script> 提示说这行代码有错,求大神解答

1.屏蔽这个行,看看还有错吗?

2.试试替换最新版本,MSDN上找了个(不确定是不最新),你也可以试试找找。

(function(b){functiond(a){this.input=a;a.attr("type")=="password"&&this.handlePassword();b(a[0].form).submit(function(){if(a.hasClass("placeholder")&&a[0].value==a.attr("placeholder"))a[0].value=""})}d.prototype={show:function(a){if(this.input[0].value===""||a&&this.valueIsPlaceholder()){if(this.isPassword)try{this.input[0].setAttribute("type","text")}catch(b){this.input.before(this.fakePassword.show()).hide()}this.input.addClass("placeholder");this.input[0].value=this.input.attr("placeholder")}},
hide:function(){if(this.valueIsPlaceholder()&&this.input.hasClass("placeholder")&&(this.input.removeClass("placeholder"),this.input[0].value="",this.isPassword)){try{this.input[0].setAttribute("type","password")}catch(a){}this.input.show();this.input[0].focus()}},valueIsPlaceholder:function(){returnthis.input[0].value==this.input.attr("placeholder")},handlePassword:function(){vara=this.input;a.attr("realType","password");this.isPassword=!0;if(b.browser.msie&&a[0].outerHTML){varc=b(a[0].outerHTML.replace(/type=(['"])?password1/gi,
"type=$1text$1"));this.fakePassword=c.val(a.attr("placeholder")).addClass("placeholder").focus(function(){a.trigger("focus");b(this).hide()});b(a[0].form).submit(function(){c.remove();a.show()})}}};vare=!!("placeholder"indocument.createElement("input"));b.fn.placeholder=function(){returne?this:this.each(function(){vara=b(this),c=newd(a);c.show(!0);a.focus(function(){c.hide()});a.blur(function(){c.show(!1)});b.browser.msie&&(b(window).load(function(){a.val()&&a.removeClass("placeholder");c.show(!0)}),
a.focus(function(){if(this.value==""){vara=this.createTextRange();a.collapse(!0);a.moveStart("character",0);a.select()}}))})}})(jQuery);

3.代码哪里下的,有地址可以看么?

❹ 有什么js库可以提供交互绘图时可以自动吸附闭合,时时检测是否垂直是否平行,时时显示角度,长度的

常用的js绘图库有:

❺ 请教JS类库 Raphael 如何在绘图的时候 给图形加文字

paper.text(x,y,"text");调整x,y的值,x,y为相应的字体位置,它就可以绘制在矩形中了

javaScript怎样做出一个画圆圈的效果啊,比如一张图片是一个小圆点,怎样让这个小圆点以20p

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>画圆</title>
<scriptsrc="http://apps.bdimg.com/libs/raphael/2.1.2/raphael-min.js"></script>
</head>
<body>

<divid="holder"></div>
<script>
varpaper=Raphael("holder",400,400);
varcircle=paper.circle(200,200,150);//从200,200开始画一个半径版150的圆
circle.attr("fill","#f00");//并用红色填权充
</script>
</body>
</html>

❼ js对html的表格处理完后,如何刷新能得到处理后的数据

需要再描述清楚点
处理后的数据是在数据库(用ajax取过来填充到表格中) 如果是在客户端内存中比如json数据直接分析填充表格,如果是因为第三方脚本引起的错误 就需要贴代码 看了

❽ raphael js-Raphael.js用path方法绘制图.是怎么做到的

没有学过该库。不过可以猜想一下,基于js的话,js中绘图是基于canvas元素的。版而canvas中的话,path方法估权计就是基于这个:

beginPath();
lineTo(坐标)
closePath().

具体的话,可以参看w3c的教程中有关canvas部分。

❾ jQuery SVG 中国地图 raphael.js 如何修改才能把 悬停弹出框 改为点击弹出框

把事件触发改成click

❿ 如何绘制current state map

我们需要准备一张矢量地图,可以从网上找一张矢量地图,或者使用illustrator绘制一份矢量地图,然后导出为SVG格式的文件,这个文件可以在浏览器上打开,然后提取里面的path路径信息(M开头的坐标)。并将path路径信息,按照chinamapPath.js的格式准备好地图路径信息。

var china = [];

function paintMap(R) {
var attr = {
"fill": "#97d6f5",
"stroke": "#eee",
"stroke-width": 1,
"stroke-linejoin": "round"
};

china.aomen = {
name: "澳门",
path: R.path("M413.032,.........省略若干......... ,414.183z").attr(attr)
}
china.hk = {
//格式同上
};
}

以上是我们将准备好的地图路径信息封装到()函数中,并保存文件名为chinamapPath.js,供后面调用。
HTML
首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinamapPath.js"></script>

然后在body中需要放置地图的位置放置div#map。

<div id="map"></div>

JAVASCRIPT
首先我们在页面中调用地图,方法如下:

window.onload = function () {
//绘制地图
var R = Raphael("map", 600, 500);//将地图载入到id为map的div中,并设置区域为600x500px大小。
paintMap(R);
}

这个时候我们用浏览器打开会显示载入后的地图。接下来我们要给地图中的对应的省份区域加上省份名称,以及鼠标滑向每个省份区块时的变色动画效果。

window.onload = function () {
var R = Raphael("map", 600, 500);
//调用绘制地图方法
paintMap(R);

var textAttr = {
"fill": "#000",
"font-size": "12px",
"cursor": "pointer"
};

for (var state in china) {
china[state]['path'].color = Raphael.getColor(0.9);

(function (st, state) {

//获取当前图形的中心坐标
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);

//写入文字
china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);

st[0].onmouseover = function () {//鼠标滑向
st.animate({fill: st.color, stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};
st[0].onmouseout = function () {//鼠标离开
st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};

})(china[state]['path'], state);
}
}

以上代码中运用了raphael提供的方法有:getColor,getBBox,animate,toFront等等,这些可以在raphael文档中找到使用说明,本文不在讲述。
此外由于地图尺寸原因,有些省份名称在地图中的显示位置不恰当,需要修正偏移量,这样看起来舒服点。

阅读全文

与raphaeljs教程相关的资料

热点内容
mac应用程序打不开了 浏览:836
qq飞车手游内测版下载地址 浏览:927
中文网站翻译成俄语多少钱 浏览:107
文件名加标题 浏览:644
共享数据怎么被冻结了 浏览:150
如何登记考勤数据 浏览:640
苹果6s前置照片效果 浏览:171
企业微信素材库文件下载链接 浏览:582
pdf文件怎么取消标黄 浏览:781
打电话时不能使用网络是什么原因 浏览:919
ps怎么将文件合并 浏览:747
java的日期格式化 浏览:981
电脑应用程序怎么关 浏览:986
微信上链接在哪个文件夹 浏览:691
欧姆龙安装打开找不到密钥文件 浏览:302
苹果基本表情 浏览:128
我的世界教育版编程在哪里 浏览:842
pong文件夹找不到 浏览:759
69版本黑切 浏览:997
杭州道富java 浏览:635

友情链接