Raphael的Braille例子
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(); }
