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.

Sign up for GitHub

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

Nested objects gotchas #315

Merged
merged 4 commits into from
Feb 14, 2022
Merged

Nested objects gotchas #315

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a6fcc26
add gotchas
ShaMan123 Oct 23, 2021
c7dc3cc
Update 2019-08-26-fabric-gotchas.html
ShaMan123 Oct 23, 2021
8962713
Update 2019-08-26-fabric-gotchas.html
ShaMan123 Feb 14, 2022
2e1b6b2
Merge remote-tracking branch 'upstream/gh-pages' into nested-objects-…
ShaMan123 Feb 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions posts/_posts/2019-08-26-fabric-gotchas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,25 @@ <h3>Objects have a transparent stroke of width 1 by default</h3>
<pre>
rect.set('strokeWidth', 0);
</pre>
<h3>Blurry Objects - retinaScaling</h3>

<p>
All objects need a reference of <code>fabric.Canvas</code> for proper rendering.
Without the reference objects can't access the retina scaling value (<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#correcting_resolution_in_a_canvas">device pixel ratio</a>), resulting in bad resolution.
This usually happens when an object is a child of a custom object. Fix it by using the parent's <code>_set</code> method.<br />
</p>

To reference canvas:
<pre>
fabric.MyCustomObject = fabric.util.createClass(fabric.Object, {
_set(key, value){
// this is a good place to pass down options to children
this.callSuper('_set', key, value);
// set canvas on nested object
key === 'canvas' && this._nestedObject._set(key, value);
}
});
</pre>

<h3>Object.clone vs util.object.clone</h3>
<p>`fabric.Object` has a `clone` method for creating copy of an instance. The subclasses of `fabric.Object`
Expand Down