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

SVGResource constructor has absolute size options #5776

Merged
merged 9 commits into from Jun 24, 2019

Conversation

@tobyspark
Copy link
Contributor

commented Jun 11, 2019

Description of change

SVG assets are resolution independent. At present, there is no way to precisely set the resolution they rasterise at during initialisation. Subsequent resizing will scale this fixed resolution asset – leading to blurriness etc.

While a scale multiplier is provided as a constructor option to alter the fixed render size, this cannot be used to set an exact size as the SVG size is unknown before instantiation. This PR provides alternative constructor options to set size directly.

Pre-Merge Checklist
  • Tests and/or benchmarks are included
  • Documentation is changed or added
  • Lint process passed (npm run lint)
  • Tests passed (npm run test)
tobyspark added 3 commits Jun 10, 2019
PIXI.Sprite.from('foo.svg', {resourceOptions: {width: 42, height: 42}})
@tobyspark

This comment has been minimized.

Copy link
Contributor Author

commented Jun 11, 2019

Fixes underlying need of #5754

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

commented Jun 13, 2019

Need our SVG specialist here :) @JetLua yo!

I think there might be something wrong with that round , give me some time to think about it.

In general, your idea looks good.

@tobyspark

This comment has been minimized.

Copy link
Contributor Author

commented Jun 13, 2019

The round was already in the code. If I were coding this from scratch, it would have been a ceil, as the canvas should contain whatever is drawn without clipping?

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

commented Jun 13, 2019

Yes, but that also means that we need to use scale, not just width/height because we adjust aspect ratio slightly. Also just ceil isnt that good, Need eps too, like here: https://github.com/pixijs/pixi.js/blob/dev/packages/math/src/shapes/Rectangle.js#L216

Also something needs to be done about resolution. How do we pass it to BaseTexture? Do we pass it to baseTexture only, not to resource?

I can approve current version, but if you have time to think about round. resolution and ceil - that'll be even better! I can look at it in weekend too.

Copy link
Member

left a comment

OK, I approve, I know what kind of tests to do about rounding, and its better to be handled in separate PR.

@tobyspark

This comment has been minimized.

Copy link
Contributor Author

commented Jun 13, 2019

On resolution – I did wonder about that. As a general design pattern, could passing in an optional rendering destination allow the particular from method to act appropriately? Here it could be to set the rasterisation to e.g. retina, but perhaps there are other optimisations. Though that sounds increasingly like a separate PR.

@JetLua
JetLua approved these changes Jun 13, 2019
@JetLua

This comment has been minimized.

Copy link
Contributor

commented Jun 13, 2019

Need our SVG specialist here :) @JetLua yo!

Ah,thanks.

@englercj englercj changed the title SVRResource constructor has absolute size options SVGResource constructor has absolute size options Jun 13, 2019
Copy link
Member

left a comment

One small change, could you just make a small documentation change to this: http://pixijs.download/dev/docs/PIXI.resources.html#.autoDetectResource

Notice that width and height say BufferResource. Would be good to mention the overrides for SVG width/height.

packages/core/src/textures/resources/SVGResource.js Outdated Show resolved Hide resolved
@codecov-io

This comment has been minimized.

Copy link

commented Jun 22, 2019

Codecov Report

Merging #5776 into dev will increase coverage by 0.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev    #5776      +/-   ##
==========================================
+ Coverage   70.55%   70.57%   +0.01%     
==========================================
  Files         205      205              
  Lines       10389    10396       +7     
==========================================
+ Hits         7330     7337       +7     
  Misses       3059     3059
Impacted Files Coverage Δ
.../core/src/textures/resources/autoDetectResource.js 100% <ø> (ø) ⬆️
...ackages/core/src/textures/resources/SVGResource.js 90.47% <100%> (+1.19%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dd9c990...421fb71. Read the comment docs.

@bigtimebuddy bigtimebuddy added this to the v5.1.0 milestone Jun 22, 2019
tobyspark and others added 2 commits Jun 24, 2019
Co-Authored-By: bigtimebuddy <mattkarl@netflix.com>
Co-Authored-By: bigtimebuddy <mattkarl@netflix.com>
@tobyspark

This comment has been minimized.

Copy link
Contributor Author

commented Jun 24, 2019

@bigtimebuddy Good oversight. I've pushed two commits to address your points. As part of the documentation commit, I also changed the language from 'render' to 'rasterize'. More precise, and I'd say helpful to separate out from 'render' as in the ongoing rendering of the scene.

Copy link
Member

left a comment

Nice thanks for making those fixes.

@bigtimebuddy bigtimebuddy merged commit ccdfa1e into pixijs:dev Jun 24, 2019
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.