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