Paper.js: Non-scaling stroke is needed

[nicholaswmin]

Many CAD apps have a feature that is called a ''hairline'' stoke, otherwise called a ''non-scaling stroke'' in SVG. It allows a consistent amount of stroking irregardless of zoom levels.

It is critical when designing very detailed drawings since the stroke never gets in the way of the designer irregardless of the zoom level. There should be more uses which i am not aware of.

Ideally this would be an attribute of an element just like stroke and fill.

[puckey]

+1 from me - would be handy for the app I am currently building..

What should the property be called?
Item#scaleStroke?

Relevant code: https://github.com/paperjs/paper.js/blob/master/src/item/Item.js#L3539

Which would need to change to something like:

ctx.lineWidth = this.getScaleStroke ? strokeWidth : strokeWidth / this.view.zoom;

[nicholaswmin]

Yeah I just divide the stroke with the zoom level and it works like a charm.

Thanks for checking this out anyway

Ah snap, I thought I was the only one building a CAD app on top of paper.

[lehni]

No this won't be enough. If there is any group / layer with applyMatrix = false, then that transformation won't be taken into account. Also, such containers can do shearing or different scaling in horizontal and vertical direction. Non-scaling strokes aren't trivial to implement in canvas, unfortunately. But I have a plan. I just need to find some time to take care of it.

[nicholaswmin]

That would be really nice.

On 4 May 2014 18:31, Jürg Lehni [email protected] wrote:

No this won't be enough. If there is any group / layer with applyMatrix =
false, then that transformation won't be taken into account. Also, such
containers can do shearing or different scaling in horizontal and vertical
direction. Non-scaling strokes aren't trivial to implement in canvas,
unfortunately. But I have a plan. I just need to find some time to take
care of it.

—
Reply to this email directly or view it on GitHubhttps://github.com/paperjs/paper.js/issues/418#issuecomment-42135629
.

Nicholas Kyriakides
Laser Plastics Industry LTD

This message and its attachments are private and confidential. If you have
received this message in error, please notify the sender and remove it and
its attachments from your system.

The University of Westminster is a charity and a company
limited by guarantee. Registration number: 977818 England.
Registered Office: 309 Regent Street, London W1B 2UW.

[sagendejonge]

+1 from me as well. Useful for us for various objects such as an item that shows layout bounds.

[lehni]

I started working on this. It's more complicated than I thought, since Shape and CompoundPath needs to be supported as well. Needed some refactoring, but I'm getting there...

[lehni]

Question: Should the view.zoom be taken into account here or not? Does a non-scaling stroke always remain true to the pixels?

[sagendejonge]

Yes. The stroke should remain the same regardless of view zoom and any transforms applied.

[nicholaswmin]

Yep same here

On 13 May 2014 11:52, sagendejonge [email protected] wrote:

Yes. The stroke should remain the same regardless of view zoom and any
transforms applied.

—
Reply to this email directly or view it on GitHubhttps://github.com/paperjs/paper.js/issues/418#issuecomment-42931523
.

Nicholas Kyriakides
Laser Plastics Industry LTD

This message and its attachments are private and confidential. If you have
received this message in error, please notify the sender and remove it and
its attachments from your system.

The University of Westminster is a charity and a company
limited by guarantee. Registration number: 977818 England.
Registered Office: 309 Regent Street, London W1B 2UW.

[lehni]

I've implemented this now. Was quite the undertaking, so proper testing is needed.

[puckey]

fantastic - will test thursday!!

[sagendejonge]

Wow that's great news. Will test as well and let you know.

[gilbo]

I found a bug with this feature in the latest nightly build ( * Date: Tue Jul 8 15:42:57 2014 +0200 * in the header comment)

I'm not at liberty to give you a copy of my code, so let me just try describing the issue: I have a group called TRAY that I'm using to hold all my drawings. Then when I need to zoom, I scale the TRAY and snap it into the viewport somewhat (so that you can't just pan the view off to infinity). In order to get this to work right without hiccuping, I set TRAY.applyMatrix = false;. Then I create a number of items, and add them all into the tray with TRAY.addChild(item); [details: The first item is a compound path representing a region with fillColor='black' and the remainder are individual copies of the constituent paths representing the contours with strokeColor='cyan'] All of the items except the region that I add to the tray have item.strokeScaling=true set. The final result is that the outlines scale and the region just sits there.

I don't know if this is a useful report, but hopefully it is. If I set strokeScaling to true on the first (region) item the problem goes away (even though the setting is visually meaningless for an unstroked path)

[lehni]

Since this is a closed issue, could you please open a new one, and provide a simplified test-case (actual code) so we can reproduce the issue? Thanks!

[gilbo]

Yes, though I'm out of office till Monday.

On Jul 17, 2014, at 3:06 PM, Jürg Lehni [email protected] wrote:

Since this is a closed issue, could you please open a new one, and provide a simple test-case (actual code) so we can reproduce the issue? Thanks!

—
Reply to this email directly or view it on GitHub.

[plong0]

3 years later and this saved my day! thanks y'all!

[SteamWind]

While searching how to disable stroke scaling on project while using zoom, I landed here. So if you also search for a solution on how to disable it, apply it to:

paper.project.currentStyle.strokeScaling = false;