fabricJS - get object classes
0
I'm importing a simple SVG, including two paths. Both of them have CSS classes.
Once loaded in my canvas, I'd like to access these classes. Is it possible ?
I tried using myPath.class, returned undefined, and inspecting my object itself doesn't show anything that looks like my classes.
fabricjs
asked Jan 3 at 11:20
Pierre Olivier TranPierre Olivier Tran
537722
add a comment |
0
I'm importing a simple SVG, including two paths. Both of them have CSS classes.
Once loaded in my canvas, I'd like to access these classes. Is it possible ?
I tried using myPath.class, returned undefined, and inspecting my object itself doesn't show anything that looks like my classes.
fabricjs
asked Jan 3 at 11:20
Pierre Olivier TranPierre Olivier Tran
537722
add a comment |
0
0
0
I'm importing a simple SVG, including two paths. Both of them have CSS classes.
Once loaded in my canvas, I'd like to access these classes. Is it possible ?
I tried using myPath.class, returned undefined, and inspecting my object itself doesn't show anything that looks like my classes.
fabricjs
asked Jan 3 at 11:20
Pierre Olivier TranPierre Olivier Tran
537722
I'm importing a simple SVG, including two paths. Both of them have CSS classes.
Once loaded in my canvas, I'd like to access these classes. Is it possible ?
I tried using myPath.class, returned undefined, and inspecting my object itself doesn't show anything that looks like my classes.
fabricjs
fabricjs
asked Jan 3 at 11:20
Pierre Olivier TranPierre Olivier Tran
537722
asked Jan 3 at 11:20
Pierre Olivier TranPierre Olivier Tran
537722
asked Jan 3 at 11:20
Pierre Olivier TranPierre Olivier Tran
537722
asked Jan 3 at 11:20
Pierre Olivier TranPierre Olivier Tran
537722
asked Jan 3 at 11:20
Pierre Olivier TranPierre Olivier Tran
537722
537722
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You need to add the class attribute to fabric.SHARED_ATTRIBUTES array.
Here is an example for rectangle.
fabric.Rect.ATTRIBUTE_NAMES.push('class');
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
alert(canvas.getObjects()[0].class);
});#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<rect x="3.2" y="8.8" class="st0" width="92.6" height="72.4"/>
</svg>
</textarea>answered Jan 3 at 16:28
Marius TurcuMarius Turcu
622312
Oh man. Thank you so much. Where did you find this ? I've been digging though the docs for a couple weeks now !
– Pierre Olivier Tran
Jan 3 at 17:29
Nowhere ... I've been working with this library for some time and I needed something like that at some moment.. I made some debug for it
– Marius Turcu
Jan 3 at 17:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021295%2ffabricjs-get-object-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You need to add the class attribute to fabric.SHARED_ATTRIBUTES array.
Here is an example for rectangle.
fabric.Rect.ATTRIBUTE_NAMES.push('class');
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
alert(canvas.getObjects()[0].class);
});#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<rect x="3.2" y="8.8" class="st0" width="92.6" height="72.4"/>
</svg>
</textarea>answered Jan 3 at 16:28
Marius TurcuMarius Turcu
622312
Oh man. Thank you so much. Where did you find this ? I've been digging though the docs for a couple weeks now !
– Pierre Olivier Tran
Jan 3 at 17:29
Nowhere ... I've been working with this library for some time and I needed something like that at some moment.. I made some debug for it
– Marius Turcu
Jan 3 at 17:34
add a comment |
1
You need to add the class attribute to fabric.SHARED_ATTRIBUTES array.
Here is an example for rectangle.
fabric.Rect.ATTRIBUTE_NAMES.push('class');
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
alert(canvas.getObjects()[0].class);
});#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<rect x="3.2" y="8.8" class="st0" width="92.6" height="72.4"/>
</svg>
</textarea>answered Jan 3 at 16:28
Marius TurcuMarius Turcu
622312
Oh man. Thank you so much. Where did you find this ? I've been digging though the docs for a couple weeks now !
– Pierre Olivier Tran
Jan 3 at 17:29
Nowhere ... I've been working with this library for some time and I needed something like that at some moment.. I made some debug for it
– Marius Turcu
Jan 3 at 17:34
add a comment |
1
1
1
You need to add the class attribute to fabric.SHARED_ATTRIBUTES array.
Here is an example for rectangle.
fabric.Rect.ATTRIBUTE_NAMES.push('class');
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
alert(canvas.getObjects()[0].class);
});#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<rect x="3.2" y="8.8" class="st0" width="92.6" height="72.4"/>
</svg>
</textarea>answered Jan 3 at 16:28
Marius TurcuMarius Turcu
622312
You need to add the class attribute to fabric.SHARED_ATTRIBUTES array.
Here is an example for rectangle.
fabric.Rect.ATTRIBUTE_NAMES.push('class');
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
alert(canvas.getObjects()[0].class);
});#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<rect x="3.2" y="8.8" class="st0" width="92.6" height="72.4"/>
</svg>
</textarea>fabric.Rect.ATTRIBUTE_NAMES.push('class');
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
alert(canvas.getObjects()[0].class);
});#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<rect x="3.2" y="8.8" class="st0" width="92.6" height="72.4"/>
</svg>
</textarea>fabric.Rect.ATTRIBUTE_NAMES.push('class');
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
alert(canvas.getObjects()[0].class);
});#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<rect x="3.2" y="8.8" class="st0" width="92.6" height="72.4"/>
</svg>
</textarea>answered Jan 3 at 16:28
Marius TurcuMarius Turcu
622312
answered Jan 3 at 16:28
Marius TurcuMarius Turcu
622312
answered Jan 3 at 16:28
Marius TurcuMarius Turcu
622312
answered Jan 3 at 16:28
Marius TurcuMarius Turcu
622312
622312
Oh man. Thank you so much. Where did you find this ? I've been digging though the docs for a couple weeks now !
– Pierre Olivier Tran
Jan 3 at 17:29
Nowhere ... I've been working with this library for some time and I needed something like that at some moment.. I made some debug for it
– Marius Turcu
Jan 3 at 17:34
add a comment |
Oh man. Thank you so much. Where did you find this ? I've been digging though the docs for a couple weeks now !
– Pierre Olivier Tran
Jan 3 at 17:29
Nowhere ... I've been working with this library for some time and I needed something like that at some moment.. I made some debug for it
– Marius Turcu
Jan 3 at 17:34
Oh man. Thank you so much. Where did you find this ? I've been digging though the docs for a couple weeks now !
– Pierre Olivier Tran
Jan 3 at 17:29
Oh man. Thank you so much. Where did you find this ? I've been digging though the docs for a couple weeks now !
– Pierre Olivier Tran
Jan 3 at 17:29
Nowhere ... I've been working with this library for some time and I needed something like that at some moment.. I made some debug for it
– Marius Turcu
Jan 3 at 17:34
Nowhere ... I've been working with this library for some time and I needed something like that at some moment.. I made some debug for it
– Marius Turcu
Jan 3 at 17:34
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021295%2ffabricjs-get-object-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
