Raphael的Braille例子：

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

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%
  3.     String path = request.getContextPath();
  4.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  5. %>
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11. <title>Title</title>
  12. <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  13. <script type="text/javascript" src="js/raphael.js"></script>
  14. <script type="text/javascript" src="js/index009.js"></script>
  15. </head>
  16. <body>
  17. <input id='message' style='width:200px' value='Raphael is great' />
  18. <input id='clickme' type='button' value='braille-ify' />
  19. <div id="container"></div>
  20. </body>
  21. </html>
  1. $(function() {
  2.     initRaphael();
  3. });
  4. function initRaphael(e) {
  5.     /**
  6.      * braille盲文
  7.      * 1 4
  8.      * 2 5
  9.      * 3 6
  10.      */
  11.     var braille = {
  12.         'A' : '1',
  13.         'B' : '1-2',
  14.         'C' : '1-4',
  15.         'D' : '1-4-5',
  16.         'E' : '1-5',
  17.         'F' : '1-2-4',
  18.         'G' : '1-2-4-5',
  19.         'H' : '1-2-5',
  20.         'I' : '2-4',
  21.         'J' : '2-4-5',
  22.         'K' : '1-3',
  23.         'L' : '1-2-3',
  24.         'M' : '1-3-4',
  25.         'N' : '1-3-4-5',
  26.         'O' : '1-3-5',
  27.         'P' : '1-2-3-4',
  28.         'Q' : '1-2-3-4-5',
  29.         'R' : '1-2-3-5',
  30.         'S' : '2-3-4',
  31.         'T' : '2-3-4-5',
  32.         'U' : '1-3-6',
  33.         'V' : '1-2-3-6',
  34.         'W' : '2-4-5-6',
  35.         'X' : '1-3-4-6',
  36.         'Y' : '1-3-4-5-6',
  37.         'Z' : '1-3-5-6'
  38.     };
  39.     var paper = Raphael('container', 500, 500);
  40.     var SPACING = 14, RADIUS = 2;
  41.     // 根据数字进行布莱叶文字转换
  42.     function make_dot(number) {
  43.         number -= 1;
  44.         if (number < 0 || number > 5) {
  45.             console.log('Invalid number.');
  46.             return null;
  47.         }
  48.         var x = Math.floor(number / 3);
  49.         var y = number % 3;
  50.         var dot = paper.circle(x * SPACING, y * SPACING, RADIUS).attr('fill', 'black');
  51.         return dot;
  52.     }
  53.     // 根据数字字符串进行布莱叶转换
  54.     function make_cell(dots) {
  55.         if (typeof dots === 'string') {
  56.             dots = dots.split('-');
  57.         }
  58.         var cell = paper.set();
  59.         for (var c = 0; c < dots.length; c++) {
  60.             cell.push(make_dot(dots[c]));
  61.         }
  62.         return cell;
  63.     }
  64.     // paper.text(10, 25, "V:");
  65.     // make_cell('1-2-3-6').transform('T30,10');
  66.     // 根据一个单词进行布莱叶转换
  67.     function make_word(word, pos) {
  68.         pos = pos || {
  69.             x : 10,
  70.             y : 10
  71.         };
  72.         word = word.toUpperCase();
  73.         var myword = paper.set();
  74.         for (var c = 0; c < word.length; c++) {
  75.             // 如果在布莱叶对象中，就进行转换
  76.             if (braille[word[c]]) {
  77.                 var letter = make_cell(braille[word[c]]);
  78.                 myword.push(letter);
  79.                 letter.transform('T' + pos.x + ',' + pos.y);
  80.                 // 绘制一个就进行x坐标的增加
  81.                 pos.x += SPACING * 3;
  82.             }
  83.         }
  84.         return myword;
  85.     }
  86.     // make_word('Raphael', {x:10,y:50});
  87.     function make_words(message) {
  88.         var pos = {
  89.             x : 10,
  90.             y : 10
  91.         };
  92.         // a  b（中间有两个空格）会split出来的长度是4；空字符串split出来的内容的确会增加新的元素；
  93.         // 'a   b'.split(' ') -> ["a", "", "", "b"]
  94.         // 'abcbd'.split('b') -> ["a", "c", "d"]
  95.         var words = message.toUpperCase().split(' ');
  96.         var myset = paper.set();
  97.         for (var c = 0; c < words.length; c++) {
  98.             myset.push(make_word(words[c], pos));
  99.             // 如果计算之后的x坐标大于paper.width，就换行；
  100.             if (pos.x > 10 && (pos.x + SPACING * 3 * words[c].length) > paper.width) {
  101.                 pos.x = 10;
  102.                 pos.y += SPACING * 5;
  103.             } else {
  104.                 // 如果是空字符串也会增加一下x坐标；
  105.                 pos.x += SPACING * 3;
  106.             }
  107.         }
  108.         return myset;
  109.     }
  110.     var braille_words = paper.set();
  111.     function make() {
  112.         // 进行已有集合的清空
  113.         braille_words.remove();
  114.         braille_words = make_words($('#message').val());
  115.     }
  116.     $('#clickme').click(make);
  117.     make();
  118. }

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. VS2015安装提示出现“安装包丢失或损坏”解决方法

    原因:microsoft root certificate authority 2010.microsoft root certificate authority 2011证书未安装,导致文件校验未通 ...

  2. USACO 1.3.3 Prime Cryptarithm

    题目链接:1.3.3 我用的枚举法,即每产生一组数据就判断是否是所给数字里的. AC还沾沾自喜,但一看题解,发现自己的代码真low... 在平时练习时,应该追求高效,精炼的代码,这样比赛时才能省出大量 ...

  3. android4.0 的图库Gallery2代码分析(二)

    最近迫于生存压力,不得不给人兼职打工.故在博文中加了个求点击的链接.麻烦有时间的博友们帮我点击一下.没时间的不用勉强啊.不过请放心,我是做技术的,肯定链接没病毒,就是我打工的淘宝店铺.嘻嘻.http: ...

  4. 再探CRC(转)

    源:http://hi.baidu.com/skystalker/item/228a263147f74e87f5e4ad8d 之前写了CRC16的程序,虽说能用,却不知其所心然,现在要用CRC32,重 ...

  5. flex中form表单中子元素之间的距离控制

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.ado ...

  6. CodeForces 618B Guess the Permutation

    只要找出当前没用过的数字中,大于或等于当前这一列的最大值就可以 #include<cstdio> #include<cstring> #include<cmath> ...

  7. Application_Start和Application_End事件执行时间

    Application_start: 第一个访问网站的用户会触发该方法. 通常会在该方法里定义一些系统变量,如聊天室的在线总人数统计,历史访问人数统计的初始化等等均可在这里定义. Applicatio ...

  8. Js apply call方法详解

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  9. MySQL 索引的使用

    一.or 的使用 (1)MySQL版本大于 5.x 的会使用 index merge 功能,即可以将多个单列索引集合起来使用,不过在查询时使用 or 的话,引擎为 myisam 的会开启 index ...

  10. NSDate详解及获取当前时间等常用操作

    NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. 创建或初始化可用以下方法 用于创建NSDate实例的类方法有 ...