allensunjian / jsxMind

基于jsmind 改写的jsxmind插件
4 stars 1 forks source link

截图处理bug #1

Open xdsnet opened 3 years ago

xdsnet commented 3 years ago

截图生成图片时,超过框的过长文本行不会匹配的自动换行,而是一次性输出,和实际显示在浏览器中的效果不一样。 可以直接用你的 http://www.sevenleos.com/jsmind/ 上的示例思维导图 看效果。

allensunjian commented 3 years ago

已更新, 重新下载jsmind.screenshot.js 替换即可

xdsnet commented 3 years ago

引入新的bug,没有正确处理html标签内容。

xdsnet commented 3 years ago

我修改了一个版本,你可以参考一下:

 // 打印文字
    jcanvas.text_multiline = function (ctx, text, x, y, w, h, lineheight) {
        var line = '';
//        var text_len = text.length;
        var lines = text.split(/\r?\n/);
        var line_len = lines.length;
        var test_line = null;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        for ( let j = 0; j < line_len; j++){
                let line='';
                if(typeof(lines[j])!= 'undefined' || lines[i]!=''){
                        let line_text = lines[j];
                        let chars = line_text.split("");
                        let text_len = line_text.length;
                        for (var i = 0; i < text_len; i++) {
                                        // 判断是否定义,因为split换行的操作会多出一个空元素
                                if(typeof(chars[i])!= 'undefined' || chars[i]!=''){
                                        test_line = line + chars[i];
                                        if (ctx.measureText(test_line).width > w && i > 0) {
                                                ctx.fillText(line, x, y);
                                                line = chars[i];
                                                y += lineheight;
                                        } else {
                                                line = test_line;
                                        }
                                }
                        }
                }
                ctx.fillText(line, x, y);
                y += lineheight;
        }

    };
allensunjian commented 3 years ago

感谢反馈~~~