0

我有一些这样的代码：

// highlight text
vi.prototype.parse = function (text) {
    // some code
    this.data = data;
};
// place it on canvas
vi.prototype.render = function () {
    /* loop */
        this.ctx.clearRect(/* ... */);
        this.ctx.fillStyle = this.data[i].bg;
        this.ctx.fillRect(/* ... */);
        this.ctx.fillText(data[i].text, /* ... */);
        // ....
    /* end loop */
};

每次文本更改时，我都会解析和呈现文本。线条无法进入画布这一事实使一切变得复杂。

1 Some line
2 Some long line line line line line line line li
 ne line line
3 Some line

用背景色和前景色解析和存储文本的最佳方法是什么？

我需要打印带有语法突出显示的文本。我有一个函数可以解析文本并以某种形式返回它，例如

text = "var x;";
highlightedText = vi.parse (text);
console.log (highlightedText);
>> [[  {text: "var", fg: "#dd5", bg: "#000"}, 
       {text: " ", fg: "#FFF", bg: "#000"},         
       {text: "x", fg: "#5dd", bg: "#000"}, 
       {text: ";", fg: "#FFF", bg: "#000"}]];
// Displays the text in canvas
vi.render (highlightedText);

我认为这不是存储文本数据的好方法

4

1 回答 1

0

这不是经过测试的代码，但这是我的想法：

将样式定义保留在主类中（vi？）

创建具有绘制文本所需的一切的 textSegment 对象：

  • 文本。
  • 文本的样式。
  • 文本的宽度。

将所有 textSegments 保存在主类的数组中。

    this.textSegments.push({ 
        text  : text, 
        textWidth : ctx.measureText(newText).width, 
        style : style 
    });

这是代码（未经测试/不完整！）：

function vi(context,lineheight){

    this.ctx=context;
    this.lineHeight=lineheight;
    this.textSegments=[];
    this.x=0;
    this.y=0;

    // keep the style definitions once and reference them in your text segments
    this.styles=[];
    this.styles["normal"]=   { font:"12px Arial", bg:"#000", fg:"#fff" };
    this.styles["operator"]= { font:"12px Arial", bg:"#000", fg:"#5dd" };
    this.styles["keywordS"]= { font:"12px Arial", bg:"#000", fg:"#d55" };

}
//
// usage: myVi.addTextSegment("Hello","normal");
//
vi.prototype.addTextSegment(text,style){

    // measure the text once while you're adding it
    this.ctx.font=newStyle.font;

    // create a textSegment object 
    // that has everything needed to draw the text
    this.textSegments.push({ 
        text  : text, 
        textWidth : ctx.measureText(newText).width, 
        style : style 
    });
}
// draw the textSegment
vi.prototype.drawTextSegment(textSegment){
    var style=this.styles[textSegment.style];
    this.ctx.save();
    this.ctx.font=textSegment.style.font;
    this.ctx.fillStyle=textSegment.style.bg;
    this.ctx.rect(this.x,this.y,textSegment.textWidth,this.lineHeight);
    this.drawText(textSegment.text,this.x,this.y);
    this.ctx.restore();
    this.x+=textSegment.textWidth;
}
于 2013-04-22T22:46:08.770 回答