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();
}
Raphael的Braille例子的更多相关文章
- Raphael Js矢量库API简介：
Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...
- 对Raphael画图标的一个jquery简单封装
公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...
- 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）
(原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...
- svg―Raphael.js Library（一）
Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...
- svg―Raphael.js Library
Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...
- 使用Raphael 画图(二) 扩展的图形 (javascript)
看这文章前,建议先看第一编文章<使用Raphael 画图(一) 基本图形 (javascript)>. 在Raphael基础上扩展的图形: 要运行该例子要引入附件的2个js包.(g.rap ...
- Raphael入门实例：绘图
raphael 实例 开始 创建画布参数说明 创建一个画布对象. 下面每个例子都会创建一个320*200大小的画布. ? 1 2 // 1.在视口的 (10,50) 坐标位置上创建画布 var pap ...
- Raphael.js--基础1
Raphael.js 特点: 1.兼容VML和SVG 2.扩展功能——动画 用法: //1.创建画布 let paper=Raphael(x,y,width,height); //2.创建形状 let ...
- Raphael path 拖动实现
让 Raphael 的 Path 动起来 Raphaël 是一个很实用的线上矢量图操作 Javascript 库.使用简单,一个值得一提的卖点是通过抽象出共同的接口屏蔽了 SVG 和 VML 之间的差 ...
随机推荐
- 转：Visual Studio进行Web性能测试- Part I
原文作者:Ambily.raj Visual Studio是可以用于性能测试的工具之一.Visual Studio Test版或Visual Studio 2010旗舰版为自动化测试提供了支持.本文介 ...
- 要你的祝福.lrc
要你的祝福(电影<我是路人甲>插曲 试听版) - 李潇潇 午夜的温度慢慢起舞 穿梭的人潮有些荒芜 开始欢呼 开始麻木 谁被谁在安抚 落单的幸福变得模糊 孤单的城市独自起舞 也许满足 也许糊 ...
- mysql优化---优化工具MySQL performance tuning primer script
MySQL performance tuning primer script一个简单好用的mysql优化工具,其实一个shell脚本 下载: $ wget http://www.day32.com/M ...
- ASP.NET MVC 5 WEB API 用户验证
参考博客:ASP.NET MVC5+EF6+EasyUI 后台管理系统(65)-MVC WebApi 用户验证 (1) 参考博客:MVC WebApi 用户验证 (2)构建ASP.NET MVC5+E ...
- IOS中集合视图UICollectionView中DecorationView的简易使用方法
转载自: http://www.it165.net/pro/html/201312/8575.html Decoration View是UICollectionView的装饰视图.苹果官方给的案例 ...
- iOS之NSDictionary和NSArray以及NSMutableDictionary和NSMutableArray：将不再是问题
字典的key就相当于数组的下标,怎样操作数组你就学会了怎样才做字典:来感受一把 需要注意的是读取文件的类型要集合.plist文件的rooty:否则将不能读入文件 // 1.全国省市:得到的是省和市 / ...
- HTML--绝对路径, 表格,表单, 框架
URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...
- 【亲测】Python:解决方案：Python Version 2.7 required, which was not found in the registry
好久不更新随笔了,今天因为数据可视化作业,想抓取一些人人网好友关系数据,于是开始尝试python,用到numpy模块,安装的时候提示: 'Python Version 2.7 required, wh ...
- 调用图灵机器人API实现Android智能机器人
非常感谢CSDN博客上的鸿洋哥,他贴出的源码是我所做的工作的基础,鸿洋哥博客链接http://blog.csdn.net/lmj623565791/article/details/38498353 下 ...
- 适用于SQl数据的Sql语句
---基础知识if exists(select * from sysdatabases where name='Exam') ---判断数据库中是否存在该数据库drop database Examgo ...