Drawing Underline, strikethrough content using PointText

[Roman Romanchenko]

Hi, guys.

I just try to inject paper.js to have possibility of drawing underline, strikethrough text.

I have an idea:

  1) It would be better, if i could add to Styles class processing of properties like 'underline' : true/false, 'strikethrough' : true/false.

      But i think, i haven't instrument to influence on Styles's class default properties.

      Change manualy implementetion of Style class of paper-full.js library is not good idea, when we check updates of this library.

  2) I have to add implementetions of methods like 'isUnderline', 'isStrikeThrough' to Styles class

  3) I have to add changes to implementetion of  '_draw' method of PointText  class to consider these newly properties.

      I mean, we could use canvas moveTo, lineTo, stroke methods to draw  lines under content of text, or strokethrough one. All we need are positions of start/end points of such lines.

      And they depend on justification of text.

So, i think there is exist another way to solve such task.

Does Anybody have expirience of solving such task?

Thanks.

[Roman Romanchenko]

Hi, guys.

Dear Jürg Lehni, could you please point your vision of drawing 'underline' text like 'Terrific' using paper.js library?

Thanks.

 

 

 

[Jürg Lehni]

Hi Roman,

I think it's to early to add a feature like this without having a more general vision for text support in place.

We are planning to add support for browser (native) fonts, SVG fonts, and custom made fonts (even dynamically generated fonts). Text should be allowed to flow into containers, and along paths, etc.

Currently, paper.js cannot give you precise information about the beginning and end points of glyphs, so implementing underlines and stroke-through is tricky.

Being able to style sub-ranges of text is one aspect of that upcoming work also, and underlines will be part of that.

Once version 1.0 is out, we'll start working on text support, but until then I prefer not to hack in partial support for such things.

I hope this makes sense?

Best,

Jürg

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Roman Romanchenko]

Hi, all.

Dear Jürg Lehni. I understand, that work with such tasks is for future.

Could you, please, look at such way of drawing underline text.

Example of extending _draw implementation of PointText class.

for (var i = 0, l = lines.length; i < l; i++) {
    ctx.shadowColor = shadowColor;
    var line = lines[i];

    if (style.hasFill()) {
        ctx.fillText(line, 0, 0);
        ctx.shadowColor = 'rgba(0,0,0,0)';
    }
    if (style.hasStroke())
        ctx.strokeText(line, 0, 0); 

    //---Implementetion for draw UNDERLINE
    //Draw underline (just example for text justification='left')
    var padding = 3;//distanse from bottom part of text's line to 'underline'
    ctx.moveTo(0,padding);
    ctx.lineTo(ctx.measureText(line), padding);
    ctx.stroke();

    ctx.translate(0, leading); 

}

I think, this is work. And we could react on any justification (some changes in coordinates for moveTo, lineTo methods).

Am i right?

Best regards,

Roman.

[nick hulea]

Roman, 

Can you use svgs ? 

http://jsfiddle.net/naeluh/pKNmd/

thanks 

Nick

--

You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
Nick Hulea the third
http://www.hulea.org
ph:330-207-3406

[Roman Romanchenko]

Hi, all.

 

Nick, how do you generate SVG data for your example with 'underline' text?

We should support text changes dynamicaly, when user edits some input elements.  

Thanks,

Roman.

[nick hulea]

Hi Roman, 

I created it in Illustrator but it isn't hard to generate these other ways 

http://raphaeljs.com/helvetica.html

http://snapsvg.io/demos/

These libraries could render your svgs then you could import them to paperjs in sort of a conveyor belt if you absolutely want to use paper for your project 

so you can dynamically generate the type in svg and then send it over to paper to then do paperjs type methods

alternatively here is a pure canvas example that is very rough for dynamic typing it need work but you could get pretty far if you worked with it  

http://jsfiddle.net/naeluh/Pzx39/

thanks 

Nick

--

You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Roman Romanchenko]

Hi, all.

Thanks, Nick, for your reply.

I see, the main issue is choosing of startY position. It depends on fontSize, fontStyle properties.

When Draw multiline text, paper.js uses 'leading' property. As an idea, we could use some part of 'leading' value, f.e. 0.1 * leading.

Thanks.