Loading

Raphael的text及对齐方式

Raphael的text及对齐方式

<%@ 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/index006.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>

 

$(function() {
    initRaphael();
});
function initRaphael(e) {
    // 这样会根据container这个ID找到该对象
    var paper = Raphael('container', 500, 500);
    var t = paper.text(200, 20, 'abc').attr('font-size', 16);
    var rec = paper.rect(200, 40, 100, 5).attr({
        fill : '#ccf',
        'stroke-width' : 0
    });
    var t2 = paper.text(200,60,'def').attr({
        // 水平左侧对齐；
        'text-anchor':'start',
        'font-size':16,
        'font-family':'Courier New'
    });
    // 垂直方向距离是可以调整的，查看生成的svg <text>对象，里面有<tspan>对象，里面有dy属性，这个属性控制了垂直方向的对齐方式；
    var l = paper.path('M200,20h100m-100,0v100M200,60h100');
    // 获取属性；
    console.log(t2.attr('text-anchor'));
}

 

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