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. RPC远程过程调用机制底层原理

  2. IE11 Windows7下F12 DOC资源管理器不能用Exception in window.onload: Error: An error has ocurredJSPlugin.3005

    ------------------ Diagnostic: Exception in window.onload: Error: An error has ocurredJSPlugin.3005 ...

  3. C# devExpress GridControl 行中行 子行 多级行

    在工作中经常会碰到需要做行中行,多级行的情况,不熟的情况下,我也只能试着实现. 命名空间 using DevExpress.XtraEditors.Repository; using System.D ...

  4. 关于MySql中自增长id设置初始值

    在MySQL数据库,设置了id为自增长类型,但由于程序还处于开发阶段,很容易的会产生错误数据,然后就直接删除了,可是id的自增长值没有跟着减少,这里提示: 如果表中数据没有用,直接删除了数据,自动增长 ...

  5. 写一个程序，统计自己C语言共写了多少行代码，Github基本操作

    前言 在上一篇博客中,本人提到了自己的文件操作可以说是几乎没用过.现在想想,这也算是只在OJ上做题的一个弊端吧.虽然通过OJ做题是一个学习代码好手段,但其他方面也要多多涉猎才好,而不是说OJ用不到文件 ...

  6. UIScrollView 和 UIPageControl

    UIScrollView [滚动视图]非常重要 UIScrollView是滚动视图,是其它带有滚动功能视图的父类, 本身不显示或者只显示背景,主要负责子视图的滚动和翻页. 一.常用属性 1.基本方法 ...

  7. php使用curl设置超时的重要性

    原文:http://phpquan.com/lamp/php/php-curl-timeout/ 网站登录不了,原因是没有可用的 PHP 子进程来响应新的请求了.这可能是是由于PHP-curl  没有 ...

  8. Lua打印Table的数据结构工具类

    --这是quick中的工具,作用就是打印Lua中强大的table的结构, 当table的嵌套层级比较多的时候,这个工具非常方便,开发中必备的工具. --具体使用方法:local debug = req ...

  9. 操作IFRAME及元素

    内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id="mainiframe..& ...

  10. posix第二篇-----linux 锁机制

    1 简介 锁机制(lock) 是多线程编程中最常用的同步机制,用来对多线程间共享的临界区(Critical Section) 进行保护. Pthreads提供了多种锁机制,常见的有: 1) Mutex ...