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

}

Raphael的text及对齐方式的更多相关文章

  1. C# Excel 中设置文字对齐方式、方向和换行

    在Excel表格中输入文字时,我们常常需要调整文字对齐方式或者对文字进行换行.本文将介绍如何通过编程的方式设置文字对齐方式,改变文字方向以及对文字进行换行. //创建Workbook对象 Workbo ...

  2. css text-align-last设置末尾文本对齐方式

    text-align-last:auto | start | end | left | right | center | justify auto: 无特殊对齐方式. left: 内容左对齐. cen ...

  3. iOS 中UI控件的各种对齐方式总结

    1.textAligment : 文字的水平方向的对齐方式 取值 NSTextAlignmentLeft      = 0,    // 左对齐 NSTextAlignmentCenter    = ...

  4. JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)

    需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...

  5. par函数的adj 参数- 控制文字的对齐方式

    adj 用来控制文字的对齐方式,取值范围为0到1,控制图片中x轴和y轴标签,标题,以及通过text 添加的文字的对齐方式 0表示左对齐,代码示例: par(adj = 0)plot(1:5, 1:5, ...

  6. PdfPCell对齐方式，边框，边框颜色的使用 （转）

    原文:http://www.cnblogs.com/LifelongLearning/archive/2011/06/22/2086802.html PdfPTable和PdfPCell对象,我们可以 ...

  7. [Swift通天遁地]二、表格表单-(12)设置表单文字对齐方式以及自适应高度的文本区域TextArea

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  9. 黄聪：phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...

随机推荐

  1. python之lambda、filter、map、reduce的用法说明

    python中有一些非常有趣的函数,面试的时候可能会遇到.今天也来总结一下,不过该类的网上资料也相当多,也没多少干货,只是习惯性将一些容易遗忘的功能进行整理. lambda 为关键字.filter,m ...

  2. js判断各个浏览器

    其实,实际写js的过程中,用功能判断”鸭shi辨形“的方法就可以了,不过,很多地方考试还是会问.所以总结一下,大部分都是分析navigator来实现的. var ua=navigator.userAg ...

  3. git查看每个版本间的差异

    命令行: 1,git log: 2,git diff 版本号码 窗口类型: 1,sudo apt-get install gitk 2,gitk

  4. IFields Interface 定义一个字段集合对象

    Description The Fields object represents a collection of columns in a table. The term field is synon ...

  5. Moocryption

    Moocryption 题目描述 Unbeknownst to many, cows are quite fond of puzzles, particularly word puzzles. Far ...

  6. FMDB增删查改

    创建,插入,更新和删除:使用executeUpdate方法,而查询则用executeQuery 1.实例化FMDatabase //paths: ios下Document路径,Document为ios ...

  7. hibernate的优化

    1.使用双向一对多关联,不实用单项一对多2.不用一对一,使用一对多3.配置对象缓存,不使用集合缓存

  8. 利用JavaAPI访问HDFS的文件

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  9. 改变tabBarItem颜色

    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UICol ...

  10. 22、手把手教你Extjs5（二十二）模块Form的自定义的设计[1]

    下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formScheme ...