Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to add text stroke #31

Closed
bbtimx opened this issue Feb 8, 2018 · 6 comments
Closed

Option to add text stroke #31

bbtimx opened this issue Feb 8, 2018 · 6 comments

Comments

@bbtimx
Copy link

bbtimx commented Feb 8, 2018

It would be nice to add the option to show text stroke.

I now modify the code after line 402 to hard implement this:

    ctx.font = model.font.string;
    ctx.fillStyle = color;
    ctx.textAlign = align;
    ctx.textBaseline = 'middle';
    ctx.lineWidth = 4;
    ctx.lineJoin = 'round';
    ctx.miterLimit = 0;
    ctx.strokeStyle = '#ffffff';

    for (i = 0; i < ilen; ++i) {
        ctx.strokeText(
            lines[i],
            Math.round(x),
            Math.round(y),
            Math.round(rect.w));
        ctx.fillText(
            lines[i],
            Math.round(x),
            Math.round(y),
            Math.round(rect.w));

        y += lh;
    }
@simonbrunel
Copy link
Member

Good idea, I need to think about the API

@simonbrunel
Copy link
Member

I'm thinking to expose the following options:

  • textStrokeColor (mapped to context.strokeStyle)
  • textStrokeWidth (mapped to context.lineWidth)

And maybe deprecate color in favor of textColor

@simonbrunel simonbrunel added this to the Version 0.4 milestone Mar 17, 2018
@simonbrunel simonbrunel removed this from the Version 0.4 milestone Jul 5, 2018
@simonbrunel
Copy link
Member

@bbtimx I tried to implement text stroke, however I'm getting ugly results, especially with small font size (< 20px). I also tried to call fillText before strokeText but it's even worse, so I'm not sure to integrate this feature.

Can you share a screenshot and a jsfiddle of your use case with your implementation?

@bbtimx
Copy link
Author

bbtimx commented Jul 19, 2018

My config:

plugins: {
  datalabels: {
    anchor: 'end',
    color: '#991d85',
    font: {
      size: 14,
      style: 'bold'
    }
  }
}

Screenshot:
image

My implementation is still exactly like above.

@simonbrunel simonbrunel added this to the Version 0.5 milestone Dec 1, 2018
@simonbrunel
Copy link
Member

Finally implemented as part of b3c0faf (textStrokeColor & textStrokeWidth). @bbtimx If you still use this plugin, can you please checkout and build master and test this feature? I'm planning to release 0.5.0 in the next few days and would like to be sure it works as expected

@simonbrunel
Copy link
Member

Released in v0.5.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants