Raphael的Braille例子：

注意里面的split(' ')方法，竟然会split出来空元素；

<%@ 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/index009.js"></script>

</head>

<body>

<input id='message' style='width:200px' value='Raphael is great' />

<input id='clickme' type='button' value='braille-ify' />

<div id="container"></div>

</body>

</html>
$(function() {

    initRaphael();

});

function initRaphael(e) {

    /**

     * braille盲文

     * 1 4

     * 2 5

     * 3 6

     */

    var braille = {

        'A' : '1',

        'B' : '1-2',

        'C' : '1-4',

        'D' : '1-4-5',

        'E' : '1-5',

        'F' : '1-2-4',

        'G' : '1-2-4-5',

        'H' : '1-2-5',

        'I' : '2-4',

        'J' : '2-4-5',

        'K' : '1-3',

        'L' : '1-2-3',

        'M' : '1-3-4',

        'N' : '1-3-4-5',

        'O' : '1-3-5',

        'P' : '1-2-3-4',

        'Q' : '1-2-3-4-5',

        'R' : '1-2-3-5',

        'S' : '2-3-4',

        'T' : '2-3-4-5',

        'U' : '1-3-6',

        'V' : '1-2-3-6',

        'W' : '2-4-5-6',

        'X' : '1-3-4-6',

        'Y' : '1-3-4-5-6',

        'Z' : '1-3-5-6'

    };

    var paper = Raphael('container', 500, 500);

    var SPACING = 14, RADIUS = 2;

    // 根据数字进行布莱叶文字转换

    function make_dot(number) {

        number -= 1;

        if (number < 0 || number > 5) {

            console.log('Invalid number.');

            return null;

        }

        var x = Math.floor(number / 3);

        var y = number % 3;

        var dot = paper.circle(x * SPACING, y * SPACING, RADIUS).attr('fill', 'black');

        return dot;

    }

    // 根据数字字符串进行布莱叶转换

    function make_cell(dots) {

        if (typeof dots === 'string') {

            dots = dots.split('-');

        }

        var cell = paper.set();

        for (var c = 0; c < dots.length; c++) {

            cell.push(make_dot(dots[c]));

        }

        return cell;

    }

    // paper.text(10, 25, "V:");

    // make_cell('1-2-3-6').transform('T30,10');

    // 根据一个单词进行布莱叶转换

    function make_word(word, pos) {

        pos = pos || {

            x : 10,

            y : 10

        };

        word = word.toUpperCase();

        var myword = paper.set();

        for (var c = 0; c < word.length; c++) {

            // 如果在布莱叶对象中，就进行转换

            if (braille[word[c]]) {

                var letter = make_cell(braille[word[c]]);

                myword.push(letter);

                letter.transform('T' + pos.x + ',' + pos.y);

                // 绘制一个就进行x坐标的增加

                pos.x += SPACING * 3;

            }

        }

        return myword;

    }

    // make_word('Raphael', {x:10,y:50});

    function make_words(message) {

        var pos = {

            x : 10,

            y : 10

        };

        // a  b（中间有两个空格）会split出来的长度是4；空字符串split出来的内容的确会增加新的元素；

        // 'a   b'.split(' ') -> ["a", "", "", "b"]

        // 'abcbd'.split('b') -> ["a", "c", "d"]

        var words = message.toUpperCase().split(' ');

        var myset = paper.set();

        for (var c = 0; c < words.length; c++) {

            myset.push(make_word(words[c], pos));

            // 如果计算之后的x坐标大于paper.width，就换行；

            if (pos.x > 10 && (pos.x + SPACING * 3 * words[c].length) > paper.width) {

                pos.x = 10;

                pos.y += SPACING * 5;

            } else {

                // 如果是空字符串也会增加一下x坐标；

                pos.x += SPACING * 3;

            }

        }

        return myset;

    }

    var braille_words = paper.set();

    function make() {

        // 进行已有集合的清空

        braille_words.remove();

        braille_words = make_words($('#message').val());

    }

    $('#clickme').click(make);

    make();

}

Raphael的Braille例子的更多相关文章

  1. Raphael Js矢量库API简介：

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  2. 对Raphael画图标的一个jquery简单封装

    公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...

  3. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  4. svg―Raphael.js Library（一）

    Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...

  5. svg―Raphael.js Library

    Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...

  6. 使用Raphael 画图(二) 扩展的图形 (javascript)

    看这文章前,建议先看第一编文章<使用Raphael 画图(一) 基本图形 (javascript)>. 在Raphael基础上扩展的图形: 要运行该例子要引入附件的2个js包.(g.rap ...

  7. Raphael入门实例：绘图

    raphael 实例 开始 创建画布参数说明 创建一个画布对象. 下面每个例子都会创建一个320*200大小的画布. ? 1 2 // 1.在视口的 (10,50) 坐标位置上创建画布 var pap ...

  8. Raphael.js--基础1

    Raphael.js 特点: 1.兼容VML和SVG 2.扩展功能——动画 用法: //1.创建画布 let paper=Raphael(x,y,width,height); //2.创建形状 let ...

  9. Raphael path 拖动实现

    让 Raphael 的 Path 动起来 Raphaël 是一个很实用的线上矢量图操作 Javascript 库.使用简单,一个值得一提的卖点是通过抽象出共同的接口屏蔽了 SVG 和 VML 之间的差 ...

随机推荐

  1. jQuery实现瀑布流(pc、移动通用)

    使用 jQuery 的 Masonry 插件来实现这种页面形式 1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src=" ...

  2. springMVC和spring上下文的关系

    springMVC继承了spring的servletcontext上下文, 所以, controller里的@Resource注入可以用以下替代 @Resource private IUserServ ...

  3. Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式？？？

    参考:http://www.cnblogs.com/oceanxing/p/3938443.html https://developer.mozilla.org/zh-CN/docs/Web/Java ...

  4. RMQ问题再临

    RMQ问题再临 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 终于,小Hi和小Ho踏上了回国的旅程.在飞机上,望着采购来的特产——小Hi陷入了沉思:还记得在上上周他们去 ...

  5. Java基础知识(一) 自增、自减运算符

    .d1 { border-style: none } .d2 { border-style: solid } .d3 { border-style: dotted } .d4 { border-sty ...

  6. php中serialize、unserialize与json_encode、json_decode比较

    性能比较 同一个变量编码或解码10000次,每个函数执行10000次所需时间 php5.2.13 json : 190 serialize : 257 json_encode : 0.08364200 ...

  7. (中等) POJ 1703 Find them, Catch them，带权并查集。

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  8. CodeForces 652D Nested Segments

    离散化+树状数组 先对坐标离散化,把每条线段结尾所在点标1, 询问某条线段内有几条线段的时候,只需询问这段区间的和是多少,询问结束之后再把这条线段尾部所在点标为0 #include<cstdio ...

  9. (中等) POJ 2991 Crane , 几何+线段树。

    Description ACM has bought a new crane (crane -- jeřáb) . The crane consists of n segments of variou ...

  10. stm32 DMA数据搬运 [操作寄存器+库函数]（转）

    源:stm32 DMA数据搬运 [操作寄存器+库函数]        DMA(Direct Memory Access)常译为“存储器直接存取”.早在Intel的8086平台上就有了DMA应用了.   ...