├── README.md ├── demo.html ├── index.html └── js ├── hidpi-canvas.js ├── index.js └── lzTxt.js /README.md: -------------------------------------------------------------------------------- 1 | # lzTxt-js 2 | 3 | >js基础版访问：index.html 4 | 美化版访问：demo.html 5 | 6 | >优化后添加的功能有： 7 | 1.将电子书的处理过程进行了封装。 8 | 2.添加翻页动画。 9 | 3.添加绘制的字体可选。 10 | 4.添加绘制的颜色可选。 11 | 12 | >[demo](http://www.lzuntalented.cn/txt/demo.html) 13 | 14 | >美化后的截图： 15 | ![选择书籍](http://upload-images.jianshu.io/upload_images/1031450-422e9f59236095ba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 16 | 17 | ![查看内容](http://upload-images.jianshu.io/upload_images/1031450-1784248fd01bb512.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 18 | 19 | ![配置面板](http://upload-images.jianshu.io/upload_images/1031450-92702de5415c8356.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 150 | 151 | 152 |

153 | 选择书籍 154 | 155 |

156 | 157 | 159 |

161 |

162 |

163 | 1 / 12 164 |

165 |

166 |

167 |

168 |

169 |

170 |

171 | A- 172 | A 173 | A+ 174 |

175 |

176 | 177 | 178 |

179 |

180 |

181 | 182 | 183 | 193 | 194 | 462 | 463 | 464 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 39 | 40 | 41 | 43 |

44 | 45 | 271 | 272 | 273 | -------------------------------------------------------------------------------- /js/hidpi-canvas.js: -------------------------------------------------------------------------------- 1 | /** 2 | * HiDPI Canvas Polyfill (1.0.10) 3 | * 4 | * Author: Jonathan D. Johnson (http://jondavidjohn.com) 5 | * Homepage: https://github.com/jondavidjohn/hidpi-canvas-polyfill 6 | * Issue Tracker: https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues 7 | * License: Apache-2.0 8 | */ 9 | (function(prototype) { 10 | 11 | var pixelRatio = (function() { 12 | var canvas = document.createElement('canvas'), 13 | context = canvas.getContext('2d'), 14 | backingStore = context.backingStorePixelRatio || 15 | context.webkitBackingStorePixelRatio || 16 | context.mozBackingStorePixelRatio || 17 | context.msBackingStorePixelRatio || 18 | context.oBackingStorePixelRatio || 19 | context.backingStorePixelRatio || 1; 20 | 21 | return (window.devicePixelRatio || 1) / backingStore; 22 | })(), 23 | 24 | forEach = function(obj, func) { 25 | for (var p in obj) { 26 | if (obj.hasOwnProperty(p)) { 27 | func(obj[p], p); 28 | } 29 | } 30 | }, 31 | 32 | ratioArgs = { 33 | 'fillRect': 'all', 34 | 'clearRect': 'all', 35 | 'strokeRect': 'all', 36 | 'moveTo': 'all', 37 | 'lineTo': 'all', 38 | 'arc': [0,1,2], 39 | 'arcTo': 'all', 40 | 'bezierCurveTo': 'all', 41 | 'isPointinPath': 'all', 42 | 'isPointinStroke': 'all', 43 | 'quadraticCurveTo': 'all', 44 | 'rect': 'all', 45 | 'translate': 'all', 46 | 'createRadialGradient': 'all', 47 | 'createLinearGradient': 'all' 48 | }; 49 | 50 | if (pixelRatio === 1) return; 51 | 52 | forEach(ratioArgs, function(value, key) { 53 | prototype[key] = (function(_super) { 54 | return function() { 55 | var i, len, 56 | args = Array.prototype.slice.call(arguments); 57 | 58 | if (value === 'all') { 59 | args = args.map(function(a) { 60 | return a * pixelRatio; 61 | }); 62 | } 63 | else if (Array.isArray(value)) { 64 | for (i = 0, len = value.length; i < len; i++) { 65 | args[value[i]] *= pixelRatio; 66 | } 67 | } 68 | 69 | return _super.apply(this, args); 70 | }; 71 | })(prototype[key]); 72 | }); 73 | 74 | // Stroke lineWidth adjustment 75 | prototype.stroke = (function(_super) { 76 | return function() { 77 | this.lineWidth *= pixelRatio; 78 | _super.apply(this, arguments); 79 | this.lineWidth /= pixelRatio; 80 | }; 81 | })(prototype.stroke); 82 | 83 | // Text 84 | // 85 | prototype.fillText = (function(_super) { 86 | return function() { 87 | var args = Array.prototype.slice.call(arguments); 88 | 89 | args[1] *= pixelRatio; // x 90 | args[2] *= pixelRatio; // y 91 | 92 | this.font = this.font.replace( 93 | /(\d+)(px|em|rem|pt)/g, 94 | function(w, m, u) { 95 | return (m * pixelRatio) + u; 96 | } 97 | ); 98 | 99 | _super.apply(this, args); 100 | 101 | this.font = this.font.replace( 102 | /(\d+)(px|em|rem|pt)/g, 103 | function(w, m, u) { 104 | return (m / pixelRatio) + u; 105 | } 106 | ); 107 | }; 108 | })(prototype.fillText); 109 | 110 | prototype.strokeText = (function(_super) { 111 | return function() { 112 | var args = Array.prototype.slice.call(arguments); 113 | 114 | args[1] *= pixelRatio; // x 115 | args[2] *= pixelRatio; // y 116 | 117 | this.font = this.font.replace( 118 | /(\d+)(px|em|rem|pt)/g, 119 | function(w, m, u) { 120 | return (m * pixelRatio) + u; 121 | } 122 | ); 123 | 124 | _super.apply(this, args); 125 | 126 | this.font = this.font.replace( 127 | /(\d+)(px|em|rem|pt)/g, 128 | function(w, m, u) { 129 | return (m / pixelRatio) + u; 130 | } 131 | ); 132 | }; 133 | })(prototype.strokeText); 134 | })(CanvasRenderingContext2D.prototype); 135 | ;(function(prototype) { 136 | prototype.getContext = (function(_super) { 137 | return function(type) { 138 | var backingStore, ratio, 139 | context = _super.call(this, type); 140 | 141 | if (type === '2d') { 142 | 143 | backingStore = context.backingStorePixelRatio || 144 | context.webkitBackingStorePixelRatio || 145 | context.mozBackingStorePixelRatio || 146 | context.msBackingStorePixelRatio || 147 | context.oBackingStorePixelRatio || 148 | context.backingStorePixelRatio || 1; 149 | 150 | ratio = (window.devicePixelRatio || 1) / backingStore; 151 | 152 | if (ratio > 1) { 153 | this.style.height = this.height + 'px'; 154 | this.style.width = this.width + 'px'; 155 | this.width *= ratio; 156 | this.height *= ratio; 157 | } 158 | } 159 | 160 | return context; 161 | }; 162 | })(prototype.getContext); 163 | })(HTMLCanvasElement.prototype); -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | var txt = {"t":"\u55f7\uff01\u592a\u53e4\u9b54\u733f\u65e0\u7a77\u65e0\u5c3d\u7684\u5438\u7eb3\u90a3\u661f\u8fb0\u4e4b\u529b\uff0c\u5168\u8eab\u77ac\u95f4\u53d8\u5f97\u8840\u7ea2\uff0c\u8eab\u5f62\u4e00\u6da8\uff0c\u5c45\u7136\u518d\u6b21\u786c\u5347\u5347\u7684\u62e8\u4e0a\u6570\u5343\u4e08\uff0c\u672c\u6765\u5df2\u9a87\u4eba\u7684\u8eab\u9ad8\uff0c\u5df2\u53d8\u5f97\u8fd1\u4e4e\u8e0f\u5730\u6491\u5929\u4e86\u3002\r\n\r\n \u4e00\u80a1\u72c2\u66b4\u7684\u7f61\u98ce\u5728\u592a\u53e4\u9b54\u733f\u8eab\u5468\u4e00\u5343\u7c73\u8303\u56f4\u5185\u8086\u8650\uff0c\u90a3\u592a\u53e4\u9b54\u733f\u9762\u76f8\u72f0\u72de\uff0c\u751a\u662f\u53ef\u6076\uff0c\u5ffd\u4e00\u5377\u91cd\u91cd\u7684\u671d\u811a\u4e0b\u8f70\u843d\uff0c\u5343\u5c3a\u8303\u56f4\u5185\uff0c\u5730\u76ae\u5982\u540c\u6ce2\u6d9b\u4e00\u822c\u88ab\u6380\u8d77\uff0c\u968f\u540e\u4e00\u5757\u5757\u788e\u77f3\u5e26\u7740\u8840\u8272\u5149\u8292\u7834\u7a7a\u98de\u51fa\uff0c\u5982\u8757\u96e8\u822c\u51b2\u5929\u7a7a\u7684\u592a\u53e4\u6b66\u4eec\u6fc0\u5c04\u800c\u53bb\u3002\r\n\r\n \u5305\u62ec\u98ce\u4e91\u65e0\u5fcc\u5728\u5185\uff0c\u5168\u90e8\u90fd\u5728\u8fd9\u4e9b\u788e\u77f3\u7684\u653b\u51fb\u8303\u56f4\u4e4b\u5185\u3002\u773c\u89c1\u90a3\u788e\u77f3\u5939\u4e07\u5747\u4e4b\u52bf\u5c04\u6765\uff0c\u98ce\u4e91\u65e0\u5fcc\u7a81\u7136\u4e4b\u95f4\u4f3c\u4e4e\u609f\u5230\u4e86\u4ec0\u4e48\uff0c\u72b9\u7591\u7740\u4f38\u51fa\u4e86\u53f3\u638c\uff0c\u5e73\u644a\u5f00\u6765\uff0c\u865a\u865a\u7684\u5bf9\u51c6\u4e86\u4e0b\u65b9\u3002\r\n\r\n \u8f70\uff01\r\n\r\n \u4e00\u80a1\u65e0\u5f62\u7684\u529b\u91cf\u4f3c\u4e4e\u8fce\u4e0a\u90a3\u6570\u4ee5\u5343\u4e07\u8ba1\uff0c\u8ff8\u5c04\u4e0a\u6765\u7684\u788e\u77f3\uff0c\u968f\u540e\u4f17\u4eba\u9707\u60ca\u7684\u770b\u5230\u90a3\u51e0\u4e4e\u5c06\u6574\u4e2a\u5730\u9762\u76d6\u6ee1\u7684\u8840\u8272\u8757\u77f3\u96e8\u5c45\u7136\u5947\u5f02\u7684\u505c\u6ede\u4e0b\u6765\u3002\u8fd9\u79cd\u505c\u6ede\u65f6\u95f4\u5e76\u4e0d\u957f\uff0c\u6700\u591a\u4e0d\u8fc7\u4e00\u79d2\uff0c\u968f\u540e\u53c8\u4ee5\u539f\u6765\u7684\u5ea6\u6fc0\u5c04\u800c\u6765\u3002\r\n\r\n \u78b0\u78b0\u78b0\uff01\uff01\uff01\r\n\r\n \u4e00\u9635\u949d\u7269\u7a7f\u8fc7*\u7684\u58f0\u97f3\u4f20\u6765\uff0c\u9635\u9635\u60e8\u568e\u58f0\u4e0d\u7edd\u4e8e\u8033\u3002\u4ee5\u8fd9\u592a\u53e4\u9b54\u733f\u7684\u529b\u91cf\uff0c\u501f\u52a9\u661f\u8fb0\u4e4b\u529b\u51fa\u7684\u8fd9\u4e00\u51fb\uff0c\u867d\u7136\u529b\u91cf\u5df2\u88ab\u5206\u6563\uff0c\u4f46\u5373\u4fbf\u5982\u6b64\uff0c\u90a3\u529b\u91cf\u4e5f\u8fdc\u8fdc\u8fc7\u4e00\u4e2a\u666e\u901a\u592a\u53e4\u9ad8\u624b\u3002\r\n\r\n \u5352\u4e0d\u53ca\u9632\u4e4b\u4e0b\uff0c\u6570\u767e\u6b66\u88ab\u788e\u77f3\u8d2f\u4f53\u800c\u4ea1\uff0c\u6570\u5343\u6b66\u53d7\u4f24\u3002\u66f4\u591a\u7684\u4eba\u5728\u6700\u540e\u4e00\u77ac\u817e\u4e0a\u66f4\u9ad8\u5904\uff0c\u9669\u9669\u907f\u8fc7\u4e86\u8fd9\u4e00\u51fb\u3002\r\n\r\n \u201c\u54c8\u54c8\u54c8\u2026\u2026\u6211\u660e\u767d\u4e86\uff0c\u6211\u7ec8\u4e8e\u660e\u767d\u4e86\uff0c\u539f\u6765\u8fd9\u4fbf\u662f\u5251\u7687\u4e4b\u5883\uff01\u201d\u4e00\u9635\u72c2\u7b11\u58f0\u7a81\u7136\u8f70\u4f20\u56db\u91ce\uff0c\u4f17\u4eba\u60ca\u58f0\u671b\u53bb\uff0c\u5374\u89c1\u98ce\u4e91\u65e0\u5fcc\u6ee1\u8138\u8eab\u8840\u6c61\uff0c\u521a\u521a\u90a3\u4e00\u95f4\u63a5\u4ea4\u624b\uff0c\u8ba9\u4ed6\u767e\u7a8d\u51fa\u8840\uff0c\u592a\u53e4\u9b54\u733f\u7684\u5a01\u4e25\u4e0d\u662f\u8c01\u90fd\u53ef\u4ee5\u627f\u53d7\u7684\u3002\u4f46\u98ce\u4e91\u65e0\u5fcc\u53d7\u6b64\u91cd\u4f24\uff0c\u53cd\u5012\u4e0d\u77e5\u4e3a\u4f55\u7b11\u5c06\u8d77\u6765\uff0c\u90a3\u7b11\u8d77\u8d8a\u6765\u8d8a\u5927\uff0c\u4f17\u4eba\u4e5f\u662f\u83ab\u540d\u5176\u5999\uff0c\u6697\u9053\uff0c\u8fd9\u4eba\u83ab\u975e\u75af\u4e86\u3002\r\n\r\n \u98ce\u4e91\u65e0\u5fcc\u50b2\u7acb\u865a\u7a7a\u4e4b\u4e2d\uff0c\u7b11\u58f0\u8d8a\u6765\u8d8a\u5927\uff0c\u800c\u4ed6\u8eab\u4e0a\u7684\u6c14\u52bf\u4e5f\u662f\u8d8a\u6765\u8d8a\u5f3a\uff0c\u8d8a\u6765\u8d8a\u60ca\u4eba\uff0c\u4e00\u6ce2\u5f3a\u8fc7\u4e00\u6ce2\uff0c\u5230\u6700\u540e\u5728\u573a\u6240\u6709\u4eba\u90fd\u611f\u53d7\u5230\u4e00\u80a1\u66b4\u98ce\u96e8\u822c\u7684\u5251\u6c14\u98ce\u66b4\uff0c\u4e0d\u5f97\u4e0d\u518d\u6b21\u9000\u907f\u4e09\u820d\u3002\r\n\r\n \u5929\u7a7a\u7684\u4e4c\u4e91\u5377\u52a8\uff0c\u5929\u5730\u4e00\u7247\u7070\u6697\uff0c\u7f61\u98ce\u6251\u9762\uff0c\u6c99\u77f3\u98de\u626c\u3002\u4e00\u4eba\u5728\u8fd9\u5929\u5730\u95f4\u72c2\u7b11\uff0c\u50b2\u6001\u6bd5\u9732\u3002\r\n\r\n \u731b\u542c\u4e00\u58f0\u2018\u5575\u2019\u7684\u58f0\u97f3\uff0c\u4f3c\u4e4e\u6709\u4ec0\u4e48\u4e1c\u897f\u7834\u788e\u4e86\uff0c\u53c8\u4f3c\u4e4e\u6709\u4ec0\u4e48\u4e1c\u897f\u7834\u8327\u800c\u51fa\u4e86\uff0c\u8c01\u4e5f\u4e0d\u660e\u767d\u8fd9\u662f\u600e\u4e48\u4e00\u56de\u4e8b\u3002\r\n\r\n \u90a3\u540d\u67af\u7626\u7684\u9ed1\u888d\u8001\u53f9\u7136\u8d5e\u9053\uff1a\u201c\u8fd9\u5929\u5730\u95f4\uff0c\u7ec8\u4e8e\u51fa\u4e86\u4e00\u4f4d\u5251\u7687\u4e86\uff01\u201d\r\n\r\n \u53ee\u549b\u549b\uff01\u6570\u4e07\u5200\u57df\u6218\u58eb\u624b\u4e2d\u7684\u957f\u5200\u9707\u98a4\u4e0d\u4f11\uff0c\u4f3c\u4e4e\u88ab\u4e00\u80a1\u65e0\u5f62\u7684\u529b\u91cf\u538b\u5236\u7740\uff0c\u4e00\u80a1\u98ce\u58f0\u547c\u5578\u800c\u8fc7\uff0c\u56db\u91ce\u91cc\uff0c\u5c1a\u672a\u88ab\u6218\u6597\u6ce2\u53ca\u7684\u5730\u5e26\uff0c\u5bc6\u96c6\u7684\u8349\u6728\u5ffd\u7136\u659c\u659c\u7684\u6307\u5411\u98ce\u4e91\u65e0\u5fcc\uff0c\u4e0b\u4e00\u523b\uff0c\u6570\u4ee5\u5343\u4ebf\u8ba1\u7684\u8349\uff0c\u6811\u53f6\u8131\u79bb\u6811\u6728\u5012\u5c04\u800c\u51fa\uff0c\u5b9b\u82e5\u51fa\u5f26\u4e4b\u7bad\u4e00\u822c\uff0c\u5bc6\u96c6\u7684\u5411\u98ce\u4e91\u65e0\u5fcc\u5c04\u53bb\u3002\r\n\r\n \u4ece\u865a\u7a7a\u4e2d\u770b\u53bb\uff0c\u4ee5\u6218\u573a\u4e3a\u4e2d\u5fc3\uff0c\u56db\u5468\u5bc6\u5bc6\u9ebb\u9ebb\u7684\u9ed1\u70b9\u6025\u98de\u800c\u6765\uff0c\u5b9b\u82e5\u6da8\u6f6e\u4e00\u822c\uff0c\u90a3\u662f\u90a3\u5929\u7a7a\u7684\u4e4c\u4e91\u4e5f\u662f\u5377\u52a8\u4e0d\u6b62\uff0c\u5f62\u6210\u65cb\u6da1\u72b6\u3002\r\n\r\n \u98ce\u4e91\u65e0\u5fcc\u7b11\u58f0\u621b\u7136\u800c\u6b62\uff0c\u8138\u4e0a\u4e00\u7247\u8083\u7136\uff0c\u5de6\u53f3\u4e24\u6307\u62fc\u6307\u5982\u621f\uff0c\u5411\u7740\u8eab\u540e\u4e00\u5f15\u518d\u5411\u8eab\u524d\u90a3\u592a\u53e4\u9b54\u733f\u4e00\u6325\u3002\u6570\u4ee5\u4ebf\u8ba1\u7684\u53f6\u7247\u5e26\u7740\u5229\u5251\u7834\u7a7a\u4e4b\u58f0\uff0c\u524c\u5411\u90a3\u5934\u8eab\u4f53\u5de8\u5927\u7684\u592a\u53e4\u9b54\u733f\u3002\r\n\r\n \u8f70\uff01\u90a3\u53f6\u7247\u5728\u98ce\u4e91\u65e0\u5fcc\u5251\u7687\u4e4b\u5883\u7684\u64cd\u63a7\u4e0b\uff0c\u5df2\u4e0e\u771f\u6b63\u7684\u5229\u5251\u6beb\u65e0\u4e8c\u81f4\u4e86\uff0c\u8fd9\u4e48\u591a\u5229\u5251\u8f70\u5728\u592a\u53e4\u9b54\u733f\u8eab\u4e0a\uff0c\u5373\u4fbf\u4ee5\u4ed6\u5438\u5f15\u661f\u8fb0\u4e4b\u529b\uff0c\u5f3a\u608d\u6570\u5341\u500d\u7684\u80fd\u529b\uff0c\u4e5f\u662f\u75db\u5f97\u55f7\u55f7\u76f4\u53eb\u5524\uff0c\u521a\u6b32\u51b2\u4e0a\u524d\u6765\uff0c\u5bf9\u4ed8\u90a3\u6e3a\u5c0f\u7684\u4eba\u7c7b\u3002\u4fbf\u89c1\u98ce\u4e91\u65e0\u5fcc\u518d\u6b21\u5c55\u5f00\u53cc\u624b\uff0c\u65b9\u5706\u5343\u7c73\u4e4b\u5185\uff0c\u6570\u4ee5\u5343\u4e07\u8ba1\u7684\u788e\u77f3\u7eb7\u7eb7\u5728\u4e00\u80a1\u65e0\u5f62\u529b\u91cf\u7684\u64cd\u63a7\u4e0b\uff0c\u96c6\u4e2d\u8f70\u5411\u90a3\u592a\u53e4\u9b54\u733f\u7684\u5934\u9885\u3002\r\n\r\n \u55f7\u543c\uff01\r\n\r\n \u8111\u888b\u5e76\u4e0d\u6bd4\u8eab\u8eaf\uff0c\u90a3\u662f\u8981\u5f31\u5f97\u5f88\uff0c\u8fd9\u4e48\u591a\u84c4\u542b\u5251\u6c14\u7684\u788e\u77f3\u8f70\u4e2d\u592a\u53e4\u9b54\u733f\u7684\u8111\u888b\uff0c\u5373\u4fbf\u4ee5\u5b83\u7684\u76ae\u7c97\u8089\u539a\uff0c\u8111\u888b\u4e5f\u88ab\u9707\u8361\u4e2a\u4e0d\u6b62\uff0c\u7136\u800c\u8fd9\u8fd8\u6ca1\u5b8c\u3002\u98ce\u4e91\u65e0\u5fcc\u518d\u4e00\u6325\u624b\uff0c\u8fd9\u4e00\u6b21\uff0c\u5c45\u7136\u662f\u4f17\u5200\u57df\u6218\u58eb\u624b\u4e2d\u7684\u957f\u5200\u9707\u98a4\u4e0d\u6b62\uff0c\u5ffd\u7136\u2018\u54bb\u2019\u7684\u4e00\u58f0\uff0c\u7834\u7a7a\u98de\u51fa\u3002\r\n\r\n \u5251\u7687\u4e4b\u5883\uff0c\u5929\u4e0b\u9664\u4e86\u5200\u7687\u4e4b\u5883\u53ca\u4ee5\u4e0a\u5883\u754c\uff0c\u6839\u672c\u65e0\u7269\u53ef\u6297\uff0c\u5200\u5251\u7686\u5728\u5fa1\u4f7f\u4e4b\u5217\u3002\r\n\r\n \u53cc\u624b\u518d\u4e00\u6325\uff0c\u90a3\u8fd1\u4e07\u7684\u7384\u94c1\u957f\u5200\u91cd\u91cd\u5982\u8131\u5f26\u4e4b\u7bad\uff0c\u91cd\u91cd\u7684\u8f70\u5728\u90a3\u592a\u53e4\u9b54\u733f\u7684\u8111\u888b\u4e0a\u3002\u8fd9\u4e00\u6b21\uff0c\u592a\u53e4\u9b54\u733f\u51fa\u4e86\u632f\u5929\u7684\u75db\u568e\uff01\r\n\r\n \u7b2c\u4e09\u6ce2\u653b\u51fb\u5c1a\u672a\u5b8c\u6210\uff0c\u98ce\u4e91\u65e0\u5fcc\u5634\u89d2\u5e26\u7740\u4e00\u62b9\u5fae\u7b11\uff0c\u7b2c\u56db\u6ce2\u653b\u51fb\u5df2\u7136\u51fa\u624b\u3002\r\n\r\n \u53cc\u624b\u5e73\u5c55\uff0c\u5982\u7ffc\u4f38\u5f00\uff0c\u5de6\u53f3\u4e24\u4fa7\uff0c\u5bc6\u5bc6\u9ebb\u9ebb\u7684\u767d\u70bd\u6c14\u5251\u6210\u884c\u5217\u6392\u5e03\uff0c\u51fa\u73b0\u5728\u865a\u7a7a\u4e4b\u4e2d\uff0c\u8fdc\u8fdc\u671b\u53bb\uff0c\u4fbf\u82e5\u98ce\u4e91\u65e0\u5fcc\u4e24\u4fa7\u957f\u51fa\u4e86\u4e00\u53cc\u7ffc\u5c55\u6570\u5343\u7c73\u7684\u5149\u7ffc\u3002\r\n\r\n \u518d\u6b21\u4e00\u6325\u624b\uff0c\u90a3\u6570\u4e07\u51fa\u73b0\u5728\u865a\u7a7a\u4e4b\u4e2d\u7684\u4e09\u5c3a\u6c14\u5251\u518d\u6b21\u8f70\u7136\u51fb\u51fa\u3002\r\n\r\n \u592a\u53e4\u9b54\u733f\u751f\u6027\u77e5\u8d8b\u51f6\u8f9f\u5409\uff0c\u4f46\u9762\u5bf9\u8fd9\u5982\u5f71\u968f\u5f62\u7684\u6c14\u5251\u6839\u672c\u65e0\u4ece\u8eb2\u907f\u3002\u90a3\u4e00\u53cc\u51f6\u76ee\u4e2d\u7b2c\u4e00\u6b21\u51fa\u73b0\u4e86\u602f\u61e6\uff0c\u671b\u7740\u98ce\u4e91\u65e0\u5fcc\u7684\u773c\u795e\u4e2d\u9732\u51fa\u4e86\u54c0\u6c42\u4e4b\u8272\u3002\r\n\r\n \u201c\u4e5f\u7f62\uff0c\u672c\u4e0e\u4f60\u5f80\u65e5\u65e0\u6028\uff0c\u8fd1\u65e5\u65e0\u4ec7\uff0c\u4f55\u5fc5\u591a\u6b64\u6740\u622e\uff01\u201d\u98ce\u4e91\u65e0\u5fcc\u770b\u5173\u592a\u53e4\u9b54\u733f\u90a3\u4e00\u53cc\u54c0\u6c42\u7684\u773c\u795e\uff0c\u7ec8\u4e8e\u53f9\u9053\uff0c\u624b\u4e00\u6325\uff0c\u90a3\u6570\u5343\u4e07\u7684\u6c14\u5251\u65e0\u58f0\u65e0\u606f\u7684\u5728\u592a\u53e4\u9b54\u733f\u8eab\u524d\u4e09\u5c3a\u5904\u6d88\u5931\u65e0\u5f62\u3002\r\n\r\n \u9707\u64bc\uff0c\u7edd\u5bf9\u7684\u9707\u64bc\uff01\u8c01\u4e5f\u6ca1\u6599\u5230\uff0c\u8fd9\u5e74\u8f7b\u7684\u5251\u9053\u9ad8\u624b\u5c45\u7136\u5982\u53ae\u6740\u5f3a\u608d\uff01\uff01\r\n\r\n \u5200\u57df\u4e2d\u4eba\u7b97\u662f\u5bf9\u4ed6\u77e5\u6839\u77e5\u5e95\uff0c\u4f46\u4e5f\u6ca1\u6599\u5230\u4ed6\u5c45\u7136\u5728\u77ed\u65f6\u95f4\u5185\uff0c\u5b9e\u529b\u66b4\u6da8\u53f3\u53ae\uff01\r\n\r\n \u201c\u98ce\u4e91\u65e0\u5fcc\uff01\u201d\r\n\r\n \u6709\u4eba\u60ca\u547c\u9053\u3002\u9002\u624d\u4f17\u4eba\u90fd\u5728\u5e94\u4ed8\u8fd9\u5934\u51f6\u7269\uff0c\u54ea\u6709\u95f2\u5fc3\u7406\u4f1a\u7a81\u7136\u51fa\u73b0\u7684\u98ce\u4e91\u65e0\u5fcc\uff0c\u76f4\u5230\u6709\u4eba\u547c\u7834\u4ed6\u7684\u540d\u5b57\uff0c\u518d\u770b\u5230\u4ed6\u5c55\u9732\u7684\u5f3a\u608d\u5b9e\u529b\uff0c\u8fd9\u624d\u660e\u4e86\uff0c\u539f\u6765\u8fd9\u4eba\u4fbf\u662f\u8f70\u4f20\u5929\u4e0b\u7684\u98ce\u4e91\u65e0\u5fcc\u3002\r\n\r\n \u4e00\u65f6\u5404\u79cd\u4e0d\u540c\u8868\u60c5\u7684\u76ee\u5149\u90fd\u6295\u5411\u4e86\u98ce\u4e91\u65e0\u5fcc\u3002\u800c\u90a3\u592a\u53e4\u9b54\u733f\u53d7\u4e86\u90a3\u51e0\u4e0b\u6253\u4e4b\u540e\uff0c\u4f3c\u4e4e\u4e5f\u53d8\u5f97\u806a\u660e\u4e86\uff0c\u4e5f\u4e0d\u505c\u7559\uff0c\u5c31\u8d81\u7740\u4f17\u4eba\u9707\u60ca\u7684\u65f6\u4faf\uff0c\u4e00\u5212\u62c9\u53cc\u81c2\uff0c\u5411\u5916\u75be\u5954\u800c\u53bb\u3002\u901a\u901a\u901a\u7684\u9707\u5730\u58f0\u9707\u8033\u6b32\u804b\u3002\r\n\r\n \u201c\u4f60\u4eec\u8fd8\u4e0d\u5feb\u53bb\u8ffd\uff0c\u518d\u4e0d\u53bb\uff0c\u5b83\u5c31\u8dd1\u4e86\u3002\u201d\u98ce\u4e91\u65e0\u5fcc\u6307\u7740\u6025\u5954\u800c\u53bb\u7684\u592a\u53e4\u9b54\u733f\uff0c\u6de1\u7136\u9053\u3002\u968f\u540e\u4fbf\u542c\u5f97\u4e00\u9635\u60ca\u547c\uff0c\u4e00\u9053\u9053\u8eab\u5f71\u62e8\u5730\u800c\u8d77\uff0c\u5411\u90a3\u592a\u53e4\u9b54\u733f\u8ffd\u53bb\u3002\u2018\u795e\u683c\u2019\u7684\u8bf1\u60d1\u592a\u5927\u4e86\u3002\r\n\r\n \u98ce\u4e91\u65e0\u5fcc\u5fae\u7b11\u4e0d\u8bed\uff0c\u5883\u754c\u63d0\u5347\u7684\u559c\u60a6\u5145\u65a5\u5fc3\u4e2d\uff0c\u8fde\u5e26\u5bf9\u8fd9\u2018\u795e\u683c\u2019\u4e5f\u4e0d\u662f\u5f88\u611f\u5174\u8da3\u4e86\uff0c\u518d\u5f3a\u608d\u7684\u4e1c\u897f\uff0c\u627e\u51fa\u5176\u7834\u7efd\uff0c\u81ea\u7136\u4e5f\u80fd\u8f7b\u677e\u5bf9\u4ed8\u3002\u5e26\u7740\u8fd9\u79cd\u660e\u609f\uff0c\u98ce\u4e91\u65e0\u5fcc\uff0c\u4e00\u6b65\u6b65\u5411\u5916\u8d70\u53bb\u3002\r\n\r\n \u5c31\u5728\u8fd9\u65f6\uff0c\u5ffd\u7136\u542c\u89c1\u8eab\u540e\u4f20\u6765\u4e00\u58f0\u60ca\u547c\uff1a\u201c\u5e08\u7236\uff0c\u7b49\u7b49\u6211\uff01\u201d\r\n\r\n \u98ce\u4e91\u65e0\u5fcc\u8038\u7136\u56de\uff0c\u5374\u89c1\u4e00\u5e74\u8f7b\u9ad8\u624b\u75be\u5954\u800c\u6765\u2026\u2026\r\n\r\n (\u6c42\u7968)\r\n\r\n _____________________________\r\n\r\n \u63a8\u8350\u4e00\u672c\u597d\u4e66\u82f1\u96c4\u65e0\u654c\u4e4b\u56fd\u6218>\uff0c\u4e66\u53f7140731\r\n\r\n \u7b80\u4ecb:\r\n\r\n \u8fdf\u4f24\u662f\u4e2a\u61d2\u5bb6\u4f19\uff0c\r\n\r\n \u5c31\u662f\u73a9\u6e38\u620f\u4e5f\u662f\u5982\u6b64\u53ef\u662f\u4e0d\u7ba1\u4ed6\u600e\u4e48\u61d2\uff0c\u4ed6\u603b\u662f\u6709\u597d\u8fd0\u6c14\u8ddf\u7740\uff0c\u5ba0\u7740\u3002\r\n\r\n \u5982\u679c\u4f60\u95ee\u4ed6\u73a9\u6e38\u620f\u4ec0\u4e48\u6700\u91cd\u8981\uff1f\u4ed6\u80af\u5b9a\u4f1a\u6beb\u4e0d\u72b9\u8c6b\u7684\u7b54\u9053\uff1a\u8fd0\u6c14\r\n\r\n \u4ec0\u4e48\u7b2c\u4e8c\u91cd\u8981\uff1f\u5229\u76ca\r\n\r\n \u8fdf\u4f24\uff1a\u4e0d\u4e0d\uff0c\u5229\u76ca\u7b2c\u4e09\uff0c\u9762\u5b50\u7b2c\u4e8c\uff01\uff01\r\n\r\n \u7eb5\u6a2a\u5929\u4e0b\uff1f\r\n\r\n \u8fdf\u4f24\uff1a\u5176\u5b9e\u771f\u7684\u5f88\u7b80\u5355\uff01\r\n\r\n \u6597\u667a\u6597\u52c7\uff1f\r\n\r\n \u8fdf\u4f24\uff1a\u4ec0\u4e48\u5929\u624d\u4e0d\u5929\u624d\u7684\uff0c\u90a3\u662f\u7535\u89c6\u5267\uff0c\u5c0f\u8bf4\u3002\u73b0\u5b9e\u4e2d\u6597\u7684\u662f\u949e\u7968\uff01\r\n\r\n \u4f46\u662f\u4f60\u770b\u4e0a\u53bb\u5c31\u5f88\u7b28\u5440\uff1f\r\n\r\n \u8fdf\u4f24\uff1a\u90a3\u53eb\u5927\u667a\u82e5\u611a\u597d\u4e0d\u597d\uff01\r\n\r\n \u4f60\u662f\u4e3b\u89d2\uff0c\u8bf4\u4ec0\u4e48\u662f\u4ec0\u4e48\u5566\uff01\r\n\r\n \u8fdf\u4f24\uff1a\u5207\uff0c\u77e5\u9053\u8fd8\u5527\u5527\u6b6a\u6b6a"}; 2 | -------------------------------------------------------------------------------- /js/lzTxt.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | function lzTxt(){ 3 | this.version = "1.0.0"; 4 | this.author = "lz"; 5 | } 6 | 7 | /*默认配置*/ 8 | var _default = { 9 | origin_txt : "",//文字文本 10 | origin_txt_list : "",//分割的文本列表 11 | origin_txt_split : "\r\n",//分割标示 12 | 13 | /*绘制区域参数*/ 14 | panel: { 15 | width : 0,//绘制区域宽度 16 | height : 0,//绘制区域高度 17 | top: 0,//绘制区域距离顶部高度 18 | left: 0,//绘制区域距离左边宽度 19 | }, 20 | 21 | /*单个文字配置相关*/ 22 | font: { 23 | top: 2,//文字顶部留空 24 | left: 0,//文字左边留空 25 | right: 0,//文字右边留空 26 | bottom: 2,//文字底部留空 27 | 28 | index: 1,//默认当前使用的文字大小序列 29 | }, 30 | 31 | /*需要计算的几种字体大小的分页信息*/ 32 | font_size_list : [16,18,20], 33 | 34 | /*钩子*/ 35 | hook_page_start: null,//开始分页计算之前 36 | hook_page_end: null,//结束分页计算之后 37 | 38 | page_draw_start: null,//单页开始绘制之前操作 39 | }; 40 | 41 | /*字体尺寸*/ 42 | var font = { 43 | size: 18 44 | } 45 | 46 | var panel = { 47 | col: Math.floor(_default.width / font.size),//列数 48 | row: Math.floor(_default.height / font.size),//行数 49 | space: 2, 50 | } 51 | 52 | var page_list = [ 53 | { 54 | line: 0, 55 | offset : 0 56 | } 57 | ]; 58 | 59 | var font_page_list = {}; 60 | 61 | /*初始化*/ 62 | lzTxt.prototype.init = function(config){ 63 | for(var i in config){ 64 | if(typeof config[i] === "object"){ 65 | if(_default[i]){ 66 | for(var j in config[i]){ 67 | _default[i][j] = config[i][j]; 68 | } 69 | continue; 70 | } 71 | } 72 | _default[i] = config[i]; 73 | } 74 | 75 | /*将原始字符串以换行分割成数组*/ 76 | _default.origin_txt_list = _default.origin_txt.split(_default.origin_txt_split); 77 | 78 | // font.size = _default.font.size; 79 | // panel = { 80 | // col: Math.floor(_default.panel.width / font.size),//列数 81 | // row: Math.floor(_default.panel.height / font.size),//行数 82 | // } 83 | // 84 | 85 | pages(); 86 | } 87 | 88 | /*获取本地文件内容*/ 89 | lzTxt.read_file = function(){ 90 | 91 | } 92 | 93 | /*开始分页*/ 94 | var pages = function(){ 95 | typeof _default.hook_page_start === "function" && _default.hook_page_start(); 96 | 97 | for(var len = _default.font_size_list.length , j = len - 1 ; j >= 0 ; --j){ 98 | /*此字体尺寸的行列信息*/ 99 | panel = { 100 | col: Math.floor(_default.panel.width / (_default.font.left + _default.font.right + _default.font_size_list[j])),//列数 101 | row: Math.floor(_default.panel.height / (_default.font.top + _default.font.bottom + _default.font_size_list[j])),//行数 102 | } 103 | console.log(panel); 104 | 105 | page_list = [ 106 | { 107 | line: 0, 108 | offset : 0 109 | } 110 | ]; 111 | var i = 0; 112 | while(true){ 113 | var page_cur = page_list.length - 1; 114 | var page = page_next(page_list[page_cur].line,page_list[page_cur].offset); 115 | page_list.push(page); 116 | if(page.line >= _default.origin_txt_list.length){ 117 | break; 118 | } 119 | } 120 | 121 | font_page_list[_default.font_size_list[j]] = page_list; 122 | } 123 | console.log(font_page_list); 124 | 125 | 126 | typeof _default.hook_page_end === "function" && _default.hook_page_end(); 127 | } 128 | 129 | /*获取当前分页信息*/ 130 | lzTxt.prototype.get_page_list = function(){ 131 | return page_list; 132 | } 133 | 134 | /*重置单页绘制之前的操作*/ 135 | lzTxt.prototype.set_page_draw_start = function(func){ 136 | if(typeof func === "function") 137 | _default.page_draw_start = func; 138 | } 139 | 140 | 141 | /*开始真实绘制下一屏*/ 142 | function page_next(page_current,page_offset){ 143 | /*返回结果*/ 144 | var result = { 145 | line : 0, 146 | offset : 0, 147 | list : [] 148 | } 149 | var str_write_list = _default.origin_txt_list; 150 | var total = panel.col * panel.row * 2;//字符有占一位和两位的，一行最多可绘制2倍长度 151 | var current = page_current; 152 | var total = panel.col * panel.row * 2;//字符有占一位和两位的，一行最多可绘制2倍长度 153 | var count = 0; 154 | var tag = false; 155 | 156 | var tmp_all_write = []; 157 | var isBreak = false;//检查是否正常跳出 158 | while(current < str_write_list.length){ 159 | 160 | var len = str_write_list[current].length; 161 | var tmp_write = []; 162 | var str = str_write_list[current]; 163 | var start = 0; 164 | if(!tag){ 165 | start = page_offset; 166 | tag = true; 167 | } 168 | 169 | var tmp = 0; 170 | var begin = start; 171 | for(var i = start; i < len ; i ++ ){ 172 | //逐个检查 173 | if(tmp >= panel.col * 2 - 1){ 174 | tmp_write.push(str.substring(begin,i)); 175 | begin = i; 176 | tmp = 0; 177 | } 178 | 179 | var len_char = 1; 180 | if(str.charCodeAt(i) > 128){ 181 | len_char = 2; 182 | } 183 | 184 | tmp += len_char; 185 | } 186 | 187 | if(tmp > 0){ 188 | tmp_write.push(str.substring(begin,i)) 189 | } 190 | 191 | if(str == "") { 192 | tmp_write.push(""); 193 | }; 194 | 195 | var offset = 0; 196 | if(tmp_all_write.length + tmp_write.length > panel.row) { 197 | for(var i = 0 ; i < tmp_all_write.length ; i ++){ 198 | result.list.push(tmp_all_write[i]); 199 | } 200 | 201 | for(var j = 0 ; j < tmp_write.length && j + i < panel.row ; j ++){ 202 | offset += tmp_write[j].length; 203 | result.list.push(tmp_write[j]); 204 | } 205 | 206 | result.line = current; 207 | result.offset = offset; 208 | isBreak = true; 209 | break ; 210 | } 211 | 212 | tmp_all_write = tmp_all_write.concat(tmp_write); 213 | 214 | current ++; 215 | } 216 | /*未正常跳出，表示到达书尾，直接绘制*/ 217 | if(!isBreak){ 218 | for(var i = 0 ; i < tmp_all_write.length ; i ++){ 219 | result.line = current; 220 | result.offset = 0; 221 | result.list.push(tmp_all_write[i]); 222 | } 223 | } 224 | 225 | return result; 226 | } 227 | 228 | var current_page = 0; 229 | 230 | lzTxt.prototype.re_render = function(){ 231 | this.render(current_page); 232 | }; 233 | 234 | /*渲染页面*/ 235 | lzTxt.prototype.render = function(page){ 236 | if(page <= 0 || page >= font_page_list[_default.font_size_list[_default.font.index]].length) 237 | return false ; 238 | 239 | ctx.clearRect(0,0,_default.width,_default.height); 240 | 241 | current_page = page; 242 | /*开始绘制画布之前的操作*/ 243 | // ctx.save(); 244 | typeof _default.page_draw_start === "function" && _default.page_draw_start(); 245 | // ctx.restore(); 246 | 247 | var list = font_page_list[_default.font_size_list[_default.font.index]][page].list; 248 | for(var i = 0; i < list.length;i++){ 249 | var x = _default.font.left; 250 | var first_space = true;//本行第一次出现空格 251 | for(var j = 0; j< list[i].length ; ++j){ 252 | if(!first_space && list[i][j] == " "){ 253 | continue; 254 | }else if(first_space && list[i][j] == " "){ 255 | first_space = false; 256 | } 257 | 258 | if(j != 0){ 259 | // if(list[i].charCodeAt(j) > 128){ 260 | x += (_default.font.left + _default.font_size_list[_default.font.index] + _default.font.right) 261 | // }else{ 262 | // x += (_default.font.left + Math.ceil(_default.font_size_list[_default.font.index] / 2) + _default.font.right) 263 | // } 264 | } 265 | 266 | // var x = j * (_default.font.left + _default.font_size_list[_default.font.index] + _default.font.right) + _default.font.left; 267 | 268 | ctx.fillText(list[i][j], 269 | x , 270 | (i + 1) * (_default.font.top + _default.font_size_list[_default.font.index] + _default.font.bottom)); 271 | } 272 | } 273 | return true; 274 | } 275 | 276 | /*获取当前电子书的进度*/ 277 | lzTxt.prototype.get_progress = function(){ 278 | return { 279 | page: current_page, 280 | total: font_page_list[_default.font_size_list[_default.font.index]].length 281 | } 282 | } 283 | 284 | /*重新渲染此页*/ 285 | lzTxt.prototype.reRender = function(font_index){ 286 | if(font_index == _default.font.index){ 287 | return ; 288 | } 289 | 290 | var list = font_page_list[_default.font_size_list[font_index]]; 291 | var row = font_page_list[_default.font_size_list[_default.font.index]][current_page].line; 292 | var line = panel.row; 293 | /*字体尺寸变大*/ 294 | if(font_index > _default.font.index){ 295 | for(var i = current_page ; i < list.length ; i++ ){ 296 | if(Math.abs(row - list[i].line) < line){ 297 | current_page = i; 298 | break; 299 | } 300 | } 301 | }else{ 302 | for(var i = current_page ; i >= 0; i-- ){ 303 | if(Math.abs(row - list[i].line) < line){ 304 | current_page = i; 305 | break; 306 | } 307 | } 308 | } 309 | _default.font.index = font_index; 310 | this.render(current_page); 311 | } 312 | 313 | /** 314 | * 获取当前绘制文字的尺寸 315 | */ 316 | lzTxt.prototype.get_font_size = function(){ 317 | return _default.font_size_list[_default.font.index]; 318 | } 319 | 320 | window.lzTxt = window.lzTxt || new lzTxt(); 321 | })(); 322 | --------------------------------------------------------------------------------