930 lines
35 KiB
JavaScript
930 lines
35 KiB
JavaScript
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
|
||
// }
|
||
|