Loading

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

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);
    
}

 

posted @ 2015-12-16 12:17  stono  阅读(359)  评论(0)  编辑  收藏  举报