您的位置：首页 > 其它

Raphael的text及对齐方式

2015-12-16 14:24 351 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航