Raphael初始化，path，circle，rect，ellipse，image

最新推荐文章于 2017-03-25 14:43:49 发布

weixin_33875564

最新推荐文章于 2017-03-25 14:43:49 发布

阅读量209

点赞数

文章标签： javascript java ViewUI

path jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/index004.js"></script>
</head>
<body>
</body>
</html>

path js:

$(function() {
    initRaphael();
});

function initRaphael(e) {
    // 这样会自动创建一个svg对象
    var paper = Raphael(0,0,300,300);
    var d = 'M10,30L60,30L10,80L60,80';
    var mark = paper.path(d);
    mark.attr({
        "stroke":"#F00",
        "stroke-width":3
    });
    mark.attr("fill","#00c");
}

other jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/index005.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>

other js:

$(function() {
    initRaphael();
});
function initRaphael(e) {
    // 这样会根据container这个ID找到该对象
    var paper = Raphael('container',500,500);
    var dot = paper.circle(250,150,100);
    dot.attr({
        fill:'red',
        stroke:'green',
        'stroke-width':3
    });
    var d = paper.ellipse(100,100,50,20);
    var rec = paper.rect(100,10,50,20);
    // 图片会产生相应的缩放
    var fluffy = paper.image('1.jpg',25,20,100,100);
    fluffy.attr('stroke','green');
    fluffy.attr('stroke-width',3);
    var png = paper.image('a.png',200,200,80,65);
    
}

weixin_33875564

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Raphael初始化，path，circle，rect，ellipse，image

path jsp：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;% String path = request.getContextPath(); String basePath = request.getScheme()...
复制链接

扫一扫