zoukankan      html  css  js  c++  java
  • 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='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();
    }
  • 相关阅读:
    如何将网格式报表打印成其它样式
    拥有与实力不相称的脾气是种灾难——北漂18年(23)
    8.8.1 Optimizing Queries with EXPLAIN
    mysql 没有rowid 怎么实现根据rowid回表呢?
    secondary index
    8.5.5 Bulk Data Loading for InnoDB Tables 批量数据加载
    mysql 中key 指的是索引
    8.5.4 Optimizing InnoDB Redo Logging 优化InnoDB Redo 日志
    8.5.3 Optimizing InnoDB Read-Only Transactions 优化InnoDB 只读事务
    8.5.1 Optimizing Storage Layout for InnoDB Tables InnoDB表的存储布局优化
  • 原文地址:https://www.cnblogs.com/stono/p/5053282.html
Copyright © 2011-2022 走看看