❶ 怎样把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绘图库有:
D3.js:一个功能强大的数据可视化库,支持吸附闭合等功能。
Raphael.js:一个轻量级的交互绘图库,支持实时显示角度和长度。
Fabric.js:一个强大的交互绘图库,支持实时检测垂直和平行等功能。
p5.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文档中找到使用说明,本文不在讲述。
此外由于地图尺寸原因,有些省份名称在地图中的显示位置不恰当,需要修正偏移量,这样看起来舒服点。