const width_screen = 64;
const height_screen = 64;
const txt_preview = document.getElementById("preview_canvas");
const txt_draw = document.getElementById("txt_canvas");
const input_ctl=document.getElementById('screen_info');
const f_color = document.getElementById('fcolor0');
const f_style = document.getElementById('txt_style0');
const f_stretch=document.getElementById('stretch_act0')
const h_align_ctrl = document.getElementById("h-align0");
const v_align_ctrl = document.getElementById("v-align0");
const font_type_ctl = document.getElementById("font0");
const font_size_ctl = document.getElementById("fontsize0");
const animation_type_ctl = document.getElementById("tx0");
const p_pausetime = document.getElementById('stay0');
const button_ctl =document.getElementById('btn_set');
const g_zoom_preview = 5;
var g_text_resrtcut_arry;//重组后的字符数组（字符串数组)
var g_text_line_width;//每一行的宽度，（数组）
var g_text_page_line;//每一页的行数,数组元素的个数，代表了总共有多少页,（数组），g_text_page_line[x]代表该页有多少行
var back_ground_img;//预览文字背景
var preview_img_data;//预览文字图片
var img_rgb_data;
    //对文字进行预处理，根据屏幕的宽度，将文字存放到二维数组，二维数组行数代表屏幕上有几行
    function restruct_input_text()
    {
        var row_txt_array = input_ctl.value;
        var font_size = parseInt(font_size_ctl.value);
        var animation_type = parseInt(animation_type_ctl.value);
        var line = 0;
        var cur_index = 0;
        g_text_resrtcut_arry = null;
        g_text_line_width = null;
        g_text_page_lines = null;
        if(row_txt_array.length != 0)
        {
            g_text_resrtcut_arry = new Array();
            g_text_line_width = new Array();
            g_text_page_lines = new Array();
            g_text_page_lines[0] = 0;
        }
        else
        {
            return;
        }  
        var line_max_per_screen = parseInt(height_screen/font_size);
        if(line_max_per_screen == 0)
        {
            line_max_per_screen = 1;
        }

        if(animation_type == 6)//连续左移单独处理，因为不需要分页
        {
            g_text_resrtcut_arry[0] = row_txt_array;

            var x_width = 0;
            for(var i=0; i<row_txt_array.length; i++)
            {
                if (row_txt_array.charCodeAt(i) > 255) //中文
                {
                    x_width += font_size;
                }
                else
                {
                    x_width += font_size/2;
                }
            }

            g_text_line_width[0] = Math.ceil(x_width/8)*8;
            g_text_page_lines[0] = 1;
        }
        else
        {
            var page = 0;
            while(1)
            {
                var text_write_width = 0;
                var row = 0;
                while(1)
                {
                    if(font_size > width_screen)//字体大于屏幕宽度
                    {
                        if(g_text_resrtcut_arry[line] == null)
                        {
                            g_text_resrtcut_arry[line] = row_txt_array.substring(cur_index, cur_index + 1);
                            g_text_line_width[line] = width_screen;
                        }
                        else
                        {
                            g_text_resrtcut_arry[line] += row_txt_array.substring(cur_index, cur_index + 1);
                            g_text_line_width[line] += width_screen;
                        }
                        
                        cur_index++;
                        line++;

                        if(line >= (page+1)*line_max_per_screen)//换一页
                        {
                            g_text_page_lines[page] += 1;
                            page++;
                            g_text_page_lines[page] = 0;
                        }
                        else
                        {
                            g_text_page_lines[page] += 1;
                        }

                        if(cur_index < row_txt_array.length)//文字未取完
                        {
                            break;//写不下 换行
                        }             
                    }
                    else{
                        if (row_txt_array.charCodeAt(cur_index) > 255) //中文
                        {
                            if((text_write_width + font_size) <= width_screen)
                            {
                                if(g_text_resrtcut_arry[line] == null)
                                {
                                    g_text_resrtcut_arry[line] = row_txt_array.substring(cur_index, cur_index + 1);
                                    g_text_line_width[line] = font_size;
                                }
                                else
                                {
                                    g_text_resrtcut_arry[line] += row_txt_array.substring(cur_index, cur_index + 1);
                                    g_text_line_width[line] += font_size;
                                }
                                
                                text_write_width += font_size;
                                cur_index++;
                            }
                            else
                            {
                                line++;
                                if(line >= (page+1)*line_max_per_screen)//换一页
                                {
                                    g_text_page_lines[page] += 1;
                                    page++;
                                    g_text_page_lines[page] = 0;
                                }
                                else
                                {
                                    g_text_page_lines[page] += 1;
                                }
                                break;//写不下 换行
                            }
                        }
                        else
                        {
                            if((text_write_width + font_size/2) <= width_screen)
                            {
                                if(g_text_resrtcut_arry[line] == null)
                                {
                                    g_text_resrtcut_arry[line] = row_txt_array.substring(cur_index, cur_index + 1);
                                    g_text_line_width[line] = font_size/2;
                                }
                                else
                                {
                                    g_text_resrtcut_arry[line] += row_txt_array.substring(cur_index, cur_index + 1);
                                    g_text_line_width[line] += font_size/2;
                                }
                                
                                text_write_width += font_size/2;
                                cur_index++;
                            }
                            else
                            {
                                line++;
                                if(line >= (page+1)*line_max_per_screen)//换一页
                                {
                                    g_text_page_lines[page] += 1;
                                    page++;
                                    g_text_page_lines[page] = 0;
                                }
                                else
                                {
                                    g_text_page_lines[page] += 1;
                                }
                                break;
                            }
                        }
                    }

                    if(cur_index >= row_txt_array.length)//文字取完
                    {
                        if(g_text_resrtcut_arry[line].length != 0)//如果最后一行不是空，但并没有完整的一行
                        {
                            g_text_page_lines[page] += 1;
                        }
                        return;//结束
                    }
                }
            }
        } 
    }
    function uint8arrayToBase64(u8Arr) {
        let CHUNK_SIZE = 0x8000; //arbitrary number
        let index = 0;
        let length = u8Arr.length;
        let result = '';
        let slice;
        while (index < length) {
            slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
            result += String.fromCharCode.apply(null, slice);
            index += CHUNK_SIZE;
        }
        return btoa(result);
    }
    // //将图片二值化
    function img_binarization(img_rgb_data)
    {   
        var tmp = 0;
        var j = 0,k = 0;

        var bin_arry = new Uint8Array(img_rgb_data.data.length/32);
        for(var i=0; i<img_rgb_data.data.length; i += 4)
        {
            tmp <<= 1;
            if(img_rgb_data.data[i] == 255 && img_rgb_data.data[i+1] == 0 && img_rgb_data.data[i+2] == 0)//白色
            {
                tmp |= 1;
            }
            
            j++;
            if(j == 8)
            {   
                bin_arry[k] = tmp;
                k++;
                j=0;
            }
        }
        var string = uint8arrayToBase64(bin_arry);
        return string;
    }
    // //绘制垂直连续的文字画布，适用于立即显示、上移和下移
    // //会改变全局txt_draw控件的值
    function draw_vertical_continue_img(font_size,H_align,V_align,total_line_nums,total_pages,type,zoom)
    {
        txt_draw.setAttribute("width", width_screen*zoom);
        txt_draw.setAttribute("height", total_pages*height_screen*zoom);
        var cur_line = 0;
        var x_offset = 0;
        var y_offset = 0;
        var yy_offset = 0;
        var font_color = parseInt(f_color.value);
        var font_type= font_type_ctl.value;
        var font_style=parseInt(f_style.value);
        var font_stretch=parseInt(f_stretch.value)
        var font_stay = parseInt(p_pausetime.value)
        var cxt = txt_draw.getContext("2d");
        cxt.scale(zoom,zoom);
        cxt.textBaseline = "middle";            //设置字体底线对齐绘制基线
        cxt.font = "lighter " + font_size.toString() + "px "+font_parse;
        var font_parse ='宋体'
        if(font_type==1){
            font_parse="宋体"
            cxt.font = "lighter " + font_size.toString() + "px "+'宋体';
        }else if(font_type==2){
            font_parse="仿宋"
            cxt.font = "lighter " + font_size.toString() + "px "+'仿宋';
        }else if(font_type==3){
            font_parse="黑体"
            cxt.font = "lighter " + font_size.toString() + "px "+'黑体';
        }else if(font_type==4){
            font_parse="楷体"
            cxt.font = "lighter " + font_size.toString() + "px "+'楷体';
        }
        // switch(font_type){
        //     case 1:font_parse="宋体"
        //     cxt.font = "lighter " + font_size.toString() + "px "+'宋体';break;
        //     case 2:font_parse="仿宋"
        //     cxt.font = "lighter " + font_size.toString() + "px "+'仿宋';break;
        //     case 3:font_parse="黑体"
        //         cxt.font = "lighter " + font_size.toString() + "px "+'黑体';break;
        //     default: font_parse="楷体"
        //         cxt.font = "lighter " + font_size.toString() + "px "+'楷体';
        // }
        // cxt.fillStyle = "rgba(255,0,0,1)";
       //设置字体颜色
       switch(font_color){
            case 1: cxt.fillStyle="rgba(255,0,0,1)";break;
            case 2: cxt.fillStyle="green";break;
            case 3: cxt.fillStyle="yellow";break;
            default:cxt.fillStyle="rgba(255,0,0,1)"
       }
      
        if(font_style==1){
            cxt.font="bold "+ font_size.toString() + "px "+font_parse;
        }else{
            cxt.font="lighter"+ font_size.toString() + "px "+font_parse;
        }
        if(font_stretch==1){
            var width= cxt.measureText(input_ctl.value).width/4
            if(width <= 64){
                cxt.scale(width,1.35,x_offset)
                cxt.save()
            }
            
        }else if(font_stretch==2){
            var width= cxt.measureText(input_ctl.value).width/80
                cxt.scale(width,1.5,y_offset)
                cxt.save()
        }
        if(font_stay===2){
            clear_screen();
        }else if(font_stay===4){
            setTimeout(function(){
                txt_draw.style='hidden="true"'
            },3000);
        }
        function clear_screen(){
            txt_draw.getContext("2d");
            // // cxt.beginPath()
            txt_draw.width=txt_draw.width;
       }
        if(type == 0)//上移
        {
            y_offset = font_size/2;
            cxt.font="lighter"+ font_size.toString() + "px "+font_parse;
        }
        else//下移
        {
            y_offset = (total_pages-1)*height_screen+font_size/2;    
            cxt.font="lighter"+ font_size.toString() + "px "+font_parse;
        }
        for(var i=0; i<total_pages; i++)//总共有几个页面
        {
            yy_offset = height_screen-g_text_page_lines[i]*font_size;
            yy_offset = (yy_offset < 0?0:yy_offset);
            if(V_align == 1)//居上
            {
                yy_offset = 0;
            }
            else if(V_align == 2)//居中
            {
                yy_offset = yy_offset/2;
            }
            for(var j=0; j<g_text_page_lines[i]; j++)
            {
                if(g_text_resrtcut_arry[cur_line] == null)
                {
                    break;
                }
                if(H_align == 1)//居左
                {
                    x_offset = 0;
                }
                else if(H_align == 2)//居中
                {
                    if(g_text_line_width[cur_line] < width_screen)
                    {
                        x_offset = (width_screen-g_text_line_width[cur_line])/2;
                    }
                }
                else//居右
                {
                    if(g_text_line_width[cur_line] < width_screen)
                    {
                        x_offset = (width_screen-g_text_line_width[cur_line]);
                    }
                }
                cxt.fillText(g_text_resrtcut_arry[cur_line], x_offset, yy_offset+y_offset+j*font_size); 
                cur_line++;   
            }
            if(type == 0)
            {
                y_offset += height_screen;
            }
            else
            {
                y_offset -= height_screen;
            }
            
        }
    }
   
 
    //绘制连续左移的文字画布，适用连续左移
     //会改变全局txt_draw控件的值
    function draw_scroll_img(font_size,zoom)
    {
        var x_width = g_text_line_width[0];
        var x_offset = 0
        var y_offset = 0;
        txt_draw.setAttribute("width", x_width*zoom);
        txt_draw.setAttribute("height", font_size*zoom);
        var font_stretch=parseInt(f_stretch.value)
        var cxt = txt_draw.getContext("2d");
        cxt.scale(zoom,zoom);
        var font_type = font_type_ctl.value;
        var font_style = parseInt(f_style.value)
        var font_color = parseInt(f_color.value)
        cxt.font = "lighter " + font_size.toString() + "px "+font_charse;
        cxt.textBaseline = "middle";            //设置字体底线对齐绘制基线
        cxt.fillStyle="rgba(255,0,0,1)"
        cxt.fillText(g_text_resrtcut_arry[0], 0,font_size/2); 
        var font_parse ='宋体'
        if(font_type==1){
            font_parse="宋体"
        }else if(font_type==2){
            font_parse="仿宋"
        }else if(font_type==3){
            font_parse="黑体"
        }else if(font_type==4){
            font_parse="楷体"
        }
        switch(font_color){
            case 1: cxt.fillStyle="rgba(255,0,0,1)";break;
            case 2: cxt.fillStyle="green";break;
            case 3: cxt.fillStyle="yellow";break;
            default:cxt.fillStyle="rgba(255,0,0,1)"
       }
        if(font_style==1){
            cxt.font="bold"+ font_size.toString() + "px "+font_charse;
        }else{
            cxt.font="lighter"+ font_size.toString() + "px "+font_charse;
        }
        if(font_stretch==1){
            var width= cxt.measureText(input_ctl.value).width/4
            if(width <= 64){
                cxt.scale(width,1.35,x_offset)
                cxt.save()
            }
            
        }else if(font_stretch==2){
            var width= cxt.measureText(input_ctl.value).width/80
            if(width <= 64){
                cxt.scale(width,1.5,y_offset)
                cxt.save()
            }
        }
    }
    //绘制水平连续的文字画布，适用于左移和右移
    function draw_horizontal_continue_img(font_size,H_align,V_align,total_line_nums,total_pages,type,zoom)
    {
        txt_draw.setAttribute("width", total_pages*width_screen*zoom);
        txt_draw.setAttribute("height", height_screen*zoom);
        var cur_line = 0;
        var x_offset = 0;
        var y_offset = 0;
        var font_color = parseInt(f_color.value);
        var font_type= font_type_ctl.value;
        var font_style=parseInt(f_style.value);
        var font_stretch=parseInt(f_stretch.value)
        var cxt = txt_draw.getContext("2d");
        cxt.scale(zoom,zoom);
        cxt.font = "lighter" + font_size.toString() + "px "+font_charse;
        cxt.textBaseline = "middle";            //设置字体底线对齐绘制基线
        var font_parse ='宋体'
        if(font_type==1){
            font_parse="宋体"
        }else if(font_type==2){
            font_parse="仿宋"
        }else if(font_type==3){
            font_parse="黑体"
        }else if(font_type==4){
            font_parse="楷体"
        }
        // cxt.fillStyle = f_color.value;
        //设置水平方向字体颜色
        switch(font_color){
            case 1: cxt.fillStyle="rgba(255,0,0,1)";break;
            case 2: cxt.fillStyle="green";break;
            case 3: cxt.fillStyle="yellow";break;
            default:cxt.fillStyle="rgba(255,0,0,1)"
        }
        if(font_style==1){
            cxt.font="bold"+ font_size.toString() + "px "+font_charse;
        }else{
            cxt.font="lighter"+ font_size.toString() + "px "+font_charse;
        }
        if(font_stretch==1){
            var width= cxt.measureText(input_ctl.value).width
            if(width <= 64){
                cxt.scale(width,1.35,x_offset)
                cxt.save()
            }
            
        }else if(font_stretch==2){
            var width= cxt.measureText(input_ctl.value).width/80
            if(width <= 64){
                cxt.scale(width,1.5,y_offset)
                cxt.save()
            }
        }
        //   //设置字体类型
        //   switch(font_type){
        //         case 1:
        //             cxt.font="宋体 24px"+"lighter";break;
        //         case 2:
        //             cxt.font="楷体 24px"+"lighter";break;
        //         case 3:
        //             cxt.font="黑体 24px"+"lighter";break;
        //         case 4:
        //             cxt.font="仿宋 24px"+"lighter";break;
        //         default:
        //             cxt.font="宋体 24px"+"lighter";
        //   }   
            if(type == 0)//上移
            {
                x_offset = 0;
                cxt.font="lighter"+ font_size.toString() + "px "+font_charse;
            }
            else//下移
            {
                x_offset = (total_pages-1)*width_screen;  
                cxt.font="lighter"+ font_size.toString() + "px "+font_charse;  
            }
            for(var i=0; i<total_pages; i++)
            {
                y_offset = height_screen-g_text_page_lines[i]*font_size;
                y_offset = (y_offset < 0?0:y_offset);
                if(V_align == 1)//居上
                {
                    y_offset = 0;
                }
                else if(V_align == 2)//居中
                {
                    y_offset = y_offset/2;
                }
                for(var j=0; j<g_text_page_lines[i]; j++)
                {
                    if(g_text_resrtcut_arry[cur_line] == null)
                    {
                        break;
                    }
                    var xx_offset = 0;
                    if(H_align == 1)//居左
                    {
                        xx_offset = 0;
                    }
                    else if(H_align == 2)//居中
                    {
                        if(g_text_line_width[cur_line] < width_screen)
                        {
                            xx_offset = (width_screen-g_text_line_width[cur_line])/2;
                        }
                    }
                    else//居右
                    {
                        if(g_text_line_width[cur_line] < width_screen)
                        {
                            xx_offset = (width_screen-g_text_line_width[cur_line]);
                        }
                    }

                    cxt.fillText(g_text_resrtcut_arry[cur_line], x_offset+xx_offset, y_offset+j*font_size+font_size/2); 
                    cur_line++;     
                }
            
                if(type == 0)
                {
                    x_offset += width_screen;
                }
                else
                {
                    x_offset -= width_screen;
                }
        }
    }
    //动态创建画布，将预处理过的文字写入画布
    function dynamic_draw_txt()
    {
        var font_int = parseInt(font_size_ctl.value);
        var animation_int = parseInt(animation_type_ctl.value);
        var H_align = parseInt(h_align_ctrl.value);
        var V_align = parseInt(v_align_ctrl.value);
        var total_line_nums = g_text_resrtcut_arry.length;
        var total_pages = g_text_page_lines.length;
        var font_type= font_type_ctl.value;
        var font_size = parseInt(font_size_ctl.value);
        // console.log(total_pages);
        if(animation_int == 1 || animation_int==4 || animation_int == 5)//立即显示或者上移
        {
            //首先绘制放大倍数为1的图片，用于底层显示，然后再绘制预览使用的放大后的图片
            var type = animation_int==5?1:0;
            var cxt = txt_draw.getContext("2d");
            draw_vertical_continue_img(font_int,H_align,V_align,total_line_nums,total_pages,type,1);
            img_rgb_data = cxt.getImageData(0,0,txt_draw.width,txt_draw.height);
            draw_vertical_continue_img(font_int,H_align,V_align,total_line_nums,total_pages,type,g_zoom_preview);
            preview_img_data = new Image();
            preview_img_data.src = txt_draw.toDataURL("../img/png");
            var font_stretch=parseInt(f_stretch.value)
            var y_offset = 0
            var x_offset = 0
            if(font_stretch==1){
                var width= cxt.measureText(input_ctl.value).width
                if(width <= 64){
                    cxt.scale(width,1.35,x_offset)
                }
                
            }else if(font_stretch==2){
                var width= cxt.measureText(input_ctl.value).width/80
                if(width <= 64){
                    cxt.scale(width,1.5,y_offset)
                    cxt.save()
                }
            }
            // console.log("-------->rebuild preview img data");
        }
        else if(animation_int == 6)//连续左移
        {
            var cxt = txt_draw.getContext("2d");
            draw_scroll_img(font_int,1);
            img_rgb_data = cxt.getImageData(0,0,txt_draw.width,txt_draw.height);
            draw_scroll_img(font_int,5);
            preview_img_data = new Image();
            preview_img_data.src = txt_draw.toDataURL("../img/png");
            var font_style =parseInt(f_style.value)
            var font_type = font_type_ctl.value
            if(font_style==1){
                cxt.font="bold "+ font_size.toString() + "px "+font_type;
            }else{
                cxt.font="lighter"+ font_size.toString() + "px "+font_type;
            }
            
        }
        else if(animation_int == 2 || animation_int == 3)//左移或者右移
        {
            //TODO
            var type = animation_int==2?0:1;
            var cxt = txt_draw.getContext("2d");
            draw_horizontal_continue_img(font_int,H_align,V_align,total_line_nums,total_pages,type,1);
            img_rgb_data = cxt.getImageData(0,0,txt_draw.width,txt_draw.height);
            draw_horizontal_continue_img(font_int,H_align,V_align,total_line_nums,total_pages,type,g_zoom_preview);
            preview_img_data = new Image();
            preview_img_data.src = txt_draw.toDataURL("../img/png");
            if(font_style==1){
                cxt.font="bold "+ font_size.toString() + "px "+font_type;
            }else{
                cxt.font="lighter"+ font_size.toString() + "px "+font_type;
            }
        }
        if(font_stretch==1){
            var width= cxt.measureText(input_ctl.value).width
            if(width <= 64){
                cxt.scale(width,1.35,x_offset)
            }
            
        }else if(font_stretch==2){
            var width= cxt.measureText(input_ctl.value).width/80
            if(width <= 64){
                cxt.scale(width,1.5,y_offset)
                cxt.save()
            }
        }
        
    }

    function draw_backgroud(width, height, scale) {
        txt_preview.setAttribute("width", width*scale);
        txt_preview.setAttribute("height", height*scale);
        var cxt = txt_preview.getContext("2d");
        cxt.fillStyle = "rgba(0,0,0,0.9)" //背景
        cxt.fillRect(0, 0, width * scale, height * scale);
        cxt.beginPath();
        cxt.strokeStyle = 'rgba(255,255,255,0.3)'; //水平线条
        for (var i = 0; i < height * scale; i += 1 * scale) {
            cxt.moveTo(0, i);
            cxt.lineTo(width * scale, i);
        }
        for (var i = 0; i < width * scale; i += 1 * scale) { //竖直线条
            cxt.moveTo(i, 0);
            cxt.lineTo(i, height * scale);
        }
        cxt.stroke();

       var img = new Image();
       img.src = txt_preview.toDataURL("../img/png");
       return img;
    }

    var cur_page_pre = 0;
    var page_init = 0;
    var cur_y_offset = 0;
    var cur_x_offset = 0;
    var cur_line_pre = 0;
    var max_offset = 0;
    var timer = 0;
    var font_size = parseInt(font_size_ctl.value);
    var font_type=font_type_ctl.value;
    var font_style=parseInt(f_style.value);
    function drawFrame()
    {
        var animation = parseInt(animation_type_ctl.value);//动画方式
        var cxt = txt_preview.getContext("2d");
        if(animation == 1)//立即显示
        {
            // console.log("--->draw page,cur_page_pre=%d",cur_page_pre);
            cxt.clearRect(0,0,width_screen*g_zoom_preview,height_screen*g_zoom_preview);
            cxt.drawImage(back_ground_img,0,0);
            cxt.drawImage(preview_img_data, 0,cur_page_pre*height_screen*g_zoom_preview, width_screen*g_zoom_preview, height_screen*g_zoom_preview, 0, 0, width_screen*g_zoom_preview, g_zoom_preview*height_screen);
        }
        else if(animation == 2)//左移
        {
            if(cur_x_offset < cur_page_pre*width_screen*g_zoom_preview)
            {
                cur_x_offset += 1*g_zoom_preview;
                timer = setTimeout("drawFrame()",30);  
            }

            cxt.clearRect(0,0,width_screen*g_zoom_preview,height_screen*g_zoom_preview);
            cxt.drawImage(back_ground_img,0,0);
            cxt.drawImage(preview_img_data, cur_x_offset, 0, width_screen*g_zoom_preview, height_screen*g_zoom_preview, 0, 0, width_screen*g_zoom_preview, g_zoom_preview*height_screen);
            if(font_style==1){
                cxt.font="bold "+ font_size.toString() + "px "+font_type;
            }else{
                cxt.font="lighter"+ font_size.toString() + "px "+font_type;
            }
        }
        else if(animation == 3)//右移
        {
            if(cur_x_offset > cur_page_pre*width_screen*g_zoom_preview)
            {
               cur_x_offset -= 1*g_zoom_preview;
               timer = setTimeout("drawFrame()",20);  
              
            }      
            cxt.clearRect(0,0,width_screen*g_zoom_preview,height_screen*g_zoom_preview);
            cxt.drawImage(back_ground_img,0,0);
            cxt.drawImage(preview_img_data, cur_x_offset, 0, width_screen*g_zoom_preview, height_screen*g_zoom_preview, 0, 0, width_screen*g_zoom_preview, g_zoom_preview*height_screen);
            if(font_style==1){
                cxt.font="bold "+ font_size.toString() + "px "+font_type;
            }else if(font_style==0){
                cxt.font="lighter"+ font_size.toString() + "px "+font_type;
            }
        }
        else if(animation == 4)//上移
        {  
            if(cur_y_offset < cur_page_pre*height_screen*g_zoom_preview)
            {
                cur_y_offset += 1*g_zoom_preview;
                timer = setTimeout("drawFrame()",20);  
            }

            cxt.clearRect(0,0,width_screen*g_zoom_preview,height_screen*g_zoom_preview);
            cxt.drawImage(back_ground_img,0,0);
            cxt.drawImage(preview_img_data, 0, cur_y_offset, width_screen*g_zoom_preview, height_screen*g_zoom_preview, 0, 0, width_screen*g_zoom_preview, g_zoom_preview*height_screen);
        }
        else if(animation == 5)//下移
        {  
            if(cur_y_offset > cur_page_pre*height_screen*g_zoom_preview)
            {
               cur_y_offset -= 1*g_zoom_preview;
               timer = setTimeout("drawFrame()",20);  
            }      
            cxt.clearRect(0,0,width_screen*g_zoom_preview,height_screen*g_zoom_preview);
            cxt.drawImage(back_ground_img,0,0);
            cxt.drawImage(preview_img_data, 0, cur_y_offset, width_screen*g_zoom_preview, height_screen*g_zoom_preview, 0, 0, width_screen*g_zoom_preview, g_zoom_preview*height_screen);
            cxt.font="lighter"+ font_size.toString() + "px "+font_type;
        }    
        else if(animation == 6)//连续左移
        {
            cxt.clearRect(0,0,width_screen*g_zoom_preview,height_screen*g_zoom_preview);
            cxt.drawImage(back_ground_img,0,0);
            cxt.drawImage(preview_img_data, cur_x_offset, 0, width_screen*g_zoom_preview, 32*g_zoom_preview, 0, 16*g_zoom_preview, width_screen*g_zoom_preview, 32*g_zoom_preview);
            cur_x_offset += 2;
            if(cur_x_offset > g_text_line_width[0]*g_zoom_preview)
            {
                cur_x_offset = 0;
            }
            timer = setTimeout("drawFrame()",30);  
        }
        
    }
    var scroll_run = 0;
    var timer_task;
    function animation_display()
    {     
        var animation = parseInt(animation_type_ctl.value);//动画方式
        if(typeof(g_text_page_lines) == undefined)
        {
            return;
        }
        var total_pages = g_text_page_lines.length;
        
        if(animation == 1 || animation==4 || animation==5)//上下切换方式的
        {   
            if(animation != 5)
            {
                cur_page_pre++;
                if(cur_page_pre >= total_pages || page_init == 1)
                {
                    cur_page_pre = 0;
                    cur_y_offset = 0;
                }
            }
            else
            {
                cur_page_pre--;
                if(cur_page_pre < 0 || page_init == 1)
                {
                    cur_page_pre = total_pages-1;
                    cur_y_offset = (total_pages-1)*height_screen*g_zoom_preview;
                }
            }
            clearTimeout(timer);
            drawFrame();
        }
        else if(animation == 6)//连续左移
        {
            if(!scroll_run)
            {
                clearTimeout(timer);
                drawFrame();
                scroll_run = 1;
            }
            
        }
        else if(animation == 2 || animation == 3)//左右切换方式的
        {
            if(animation == 2)
            {
                cur_page_pre++;
                if(cur_page_pre >= total_pages || page_init == 1)
                {
                    cur_page_pre = 0;
                    cur_x_offset = 0;
                }
            }
            else
            {
                cur_page_pre--;
                if(cur_page_pre < 0 || page_init == 1)
                {
                    cur_page_pre = total_pages-1;
                    cur_x_offset = (total_pages-1)*height_screen*g_zoom_preview;
                }
            }
            clearTimeout(timer);
            drawFrame();
        }         
        page_init = 0;
        timer_task = setTimeout("animation_display()",3000);  
    }
    function re_draw_screens()
    {
        restruct_input_text();
        dynamic_draw_txt();
        clearTimeout(timer_task);
        page_init = 1;

        timer_task = setTimeout("animation_display()",200);  
    }

    window.onload = () => {        
        back_ground_img = draw_backgroud(width_screen, height_screen, 5);
        re_draw_screens();
    }

       //将图片二值化
       function img_binarization(img_rgb_data)
       {   
           var tmp = 0;
           var j = 0,k = 0;

           var bin_arry = new Uint8Array(img_rgb_data.data.length/32);
           for(var i=0; i<img_rgb_data.data.length; i += 4)
           {
               tmp <<= 1;
               if(img_rgb_data.data[i] == 255 && img_rgb_data.data[i+1] == 0 && img_rgb_data.data[i+2] == 0)//白色
               {
                   tmp |= 1;
               }
               
               j++;
               if(j == 8)
               {   
                   bin_arry[k] = tmp;
                   k++;
                   j=0;
               }
           }
        //    console.log(bin_arry);
           var string = uint8arrayToBase64(bin_arry);
           console.log(string);
           return string;
       }
    // input_ctl.onchange = () => {
    //    re_draw_screens();
    //    var img_string = img_binarization(img_rgb_data);
       
    //  //  httpPost("img_data",img_string);
    // }
    
    input_ctl.onchange = () => {

        re_draw_screens();

    }
    p_pausetime.onchange=()=>{

        re_draw_screens();

     }
    f_color.onchange=()=>{

        re_draw_screens();
    }
    font_size_ctl.onchange = () => {
        re_draw_screens();
    }
    font_type_ctl.onchange = () => {
        re_draw_screens();
    }
    f_style.onchange=()=>{
        re_draw_screens();
    }
    f_stretch.onclick=()=>{
        re_draw_screens();
    }
    h_align_ctrl.onchange = () => {
        re_draw_screens();
      }
    v_align_ctrl.onchange = () => {
        re_draw_screens();
    }
    animation_type_ctl.onchange = () => {
        re_draw_screens();
    }
    // button_ctl.onclick= () => {
    //     var canvas_width = txt_draw.getAttribute("width")/g_zoom_preview;
    //     var canvas_height = txt_draw.getAttribute("height")/g_zoom_preview;
    //     var img_string = img_binarization(img_rgb_data);
    //     var post_string =
    //         `<data>${img_string}</data><animation>${animation_type_ctl.value}</animation><width>${canvas_width}</width><height>${canvas_height}<height>`;
    //     httpPost("data.json", post_string);
    //     console.log(post_string)
    //       return false
    // }