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. FZU 2107 Hua Rong Dao（暴力回溯）

    dfs暴力回溯,这个代码是我修改以后的,里面的go相当简洁,以前的暴力手打太麻烦,我也来点技术含量.. #include<iostream> #include<cstring> ...

  2. Java正则表达式细节1

     Java中使用特定的字符类别比如 \d \s \w \d 匹配数字 \s 匹配空白字符 \w 匹配数字或者字符或者下划线[a-zA-Z0-9_] 比如使员正则的时候: 使用的是2个 斜杠 @Test ...

  3. Spring MVC Json数据传递

    json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每 ...

  4. Linux终端、控制台复制粘贴

    1. 在终端下:          复制命令:Ctrl + Shift + C  组合键.          粘贴命令:Ctrl + Shift + V  组合键.  2. 在控制台下:        ...

  5. php --with-mysql=mysqlnd

    1.什么是mysqlnd驱动? PHP手册上的描述: MySQL Native Driver is a replacement for the MySQL Client Library (libmys ...

  6. [iOS Animation]-CALayer 隐式动画

    隐式动画 按照我的意思去做,而不是我说的. -- 埃德娜,辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情.但是动画是Core Animation库一个非常显著的 ...

  7. Android如何监听蓝牙耳机的按键事件(转)

    源: Android如何监听蓝牙耳机的按键事件 写在前面: 直接想要代码很简单,你直接把滚动条拉到最底端就可以看到.如果想要十分地了解为什么,那就按照我规划的一步一步来理解.以下测试环境以手头上有的「 ...

  8. sharedPreferences存储数据

    sharedPreferences使用的是键值对的方式存储数据. 1.Android中三种获取sharedPreferences的方式 1)Context 类中的getSharedPreference ...

  9. ajax修改密码

    <div>用户名:<input type="text" id="uid" /><span id="tt" st ...

  10. DWR3.0框架入门（3） —— ScriptSession的维护及优化

    1.ScriptSession使用中存在的问题        在上一节实现了服务器的推送功能,但是根据 ScriptSession的生命周期我们可以得出以下几点的问题:   (1)ScriptSess ...