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. javascript 中this的使用场景全

    1. global this 2.function this 3.prototype this 4. object this 5.DOM this 6 HTML this 7 override thi ...

  2. 【poj解题】1308

    判断一个图是否是一个树,树满足一下2个条件即可:1. 边树比node数少12. 所有node的入度非0即1 节点数是0的时候,空树,合法树~ 代码如下 #include <stdio.h> ...

  3. iOS两个关于对象的关键字

    标签: swift新特性(__nullable和__nonnull) 最近在看老师写代码的时候经常遇到两个陌生的关键字,但是当我在我的电脑上敲得时候就是敲不出,后来才知道这是为了swift与OC混编的 ...

  4. ibatis参数传递小技巧 - 疯狂的菠菜 - ITeye技术网站

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

  5. Redis数据备份和重启恢复

    一.对Redis持久化的探讨与理解 目前Redis持久化的方式有两种: RDB 和 AOF 首先,我们应该明确持久化的数据有什么用,答案是用于重启后的数据恢复. Redis是一个内存数据库,无论是RD ...

  6. oracle查看表空间物理文件的名称，路径及大小

    select tablespace_name, file_id,file_name,round(bytes/(1024*1024),0) total_space from dba_data_files ...

  7. 仿复制粘贴功能，长按弹出tips的实现

    方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...

  8. C# DateTime简单的定时器用法

    DateTime是C#中的时间类,有公共索引器Now可以获取当前时间. 如果制作简单定时器的话,可以这样: 初始化:DateTime lasttime=DateTime.Now; TimeSpan t ...

  9. Laravel 安装

    其实,laravel的安装网上给了很多方法,但是你可以直接根据laravel中国官网http://www.golaravel.com/docs/4.1/installation/给出的三种方法,选择其 ...

  10. 最小化安装Linux记录

    挂载点: /boot 挂载点  100M swap 交换分区 / 根分区 最小化安装: 基本--基本.兼容库.调试工具 开发--开发工具 修改hostname 永久设置:/etc/sysconfig/ ...