How to merge touched paths in fabrcjs?

0

I am developing a mobile application for drawing and I need to merge paths when they are touching each other, but they currently overlap one another. Is there any other way to do it?

In the below image I want to achieve the right side, not the left side.

What should I do? Below is my fabric.js code.

 setCanvasBackground(imagePath) {

      fabric.Image.fromURL(imagePath, (img)=>  {

         this.scaleAndPositionImage(img);

      });

      this.canvas.freeDrawingBrush.color = this.brushColors[0];

      this.canvas.on('path:created', (opt) => {

        // opt.path.globalCompositeOperation = 'lighter';

        this.canvas.renderAll(this.canvas);

      });

  }

javascript canvas fabricjs

share|improve this question

edited Jan 4 at 4:39

Mahesh Maf

316

asked Jan 2 at 2:33

Gopinath KaliappanGopinath Kaliappan

1,46231742

add a comment | 

0

I am developing a mobile application for drawing and I need to merge paths when they are touching each other, but they currently overlap one another. Is there any other way to do it?

In the below image I want to achieve the right side, not the left side.

What should I do? Below is my fabric.js code.

 setCanvasBackground(imagePath) {

      fabric.Image.fromURL(imagePath, (img)=>  {

         this.scaleAndPositionImage(img);

      });

      this.canvas.freeDrawingBrush.color = this.brushColors[0];

      this.canvas.on('path:created', (opt) => {

        // opt.path.globalCompositeOperation = 'lighter';

        this.canvas.renderAll(this.canvas);

      });

  }

javascript canvas fabricjs

share|improve this question

edited Jan 4 at 4:39

Mahesh Maf

316

asked Jan 2 at 2:33

Gopinath KaliappanGopinath Kaliappan

1,46231742

add a comment | 

0

0

0

I am developing a mobile application for drawing and I need to merge paths when they are touching each other, but they currently overlap one another. Is there any other way to do it?

In the below image I want to achieve the right side, not the left side.

What should I do? Below is my fabric.js code.

 setCanvasBackground(imagePath) {

      fabric.Image.fromURL(imagePath, (img)=>  {

         this.scaleAndPositionImage(img);

      });

      this.canvas.freeDrawingBrush.color = this.brushColors[0];

      this.canvas.on('path:created', (opt) => {

        // opt.path.globalCompositeOperation = 'lighter';

        this.canvas.renderAll(this.canvas);

      });

  }

javascript canvas fabricjs

share|improve this question

edited Jan 4 at 4:39

Mahesh Maf

316

asked Jan 2 at 2:33

Gopinath KaliappanGopinath Kaliappan

1,46231742

I am developing a mobile application for drawing and I need to merge paths when they are touching each other, but they currently overlap one another. Is there any other way to do it?

In the below image I want to achieve the right side, not the left side.

What should I do? Below is my fabric.js code.

 setCanvasBackground(imagePath) {

      fabric.Image.fromURL(imagePath, (img)=>  {

         this.scaleAndPositionImage(img);

      });

      this.canvas.freeDrawingBrush.color = this.brushColors[0];

      this.canvas.on('path:created', (opt) => {

        // opt.path.globalCompositeOperation = 'lighter';

        this.canvas.renderAll(this.canvas);

      });

  }

javascript canvas fabricjs

javascript canvas fabricjs

share|improve this question

edited Jan 4 at 4:39

Mahesh Maf

316

asked Jan 2 at 2:33

Gopinath KaliappanGopinath Kaliappan

1,46231742

share|improve this question

edited Jan 4 at 4:39

Mahesh Maf

316

asked Jan 2 at 2:33

Gopinath KaliappanGopinath Kaliappan

1,46231742

share|improve this question

share|improve this question

edited Jan 4 at 4:39

Mahesh Maf

316

edited Jan 4 at 4:39

Mahesh Maf

316

edited Jan 4 at 4:39

Mahesh Maf

316

316

asked Jan 2 at 2:33

Gopinath KaliappanGopinath Kaliappan

1,46231742

asked Jan 2 at 2:33

Gopinath KaliappanGopinath Kaliappan

1,46231742

asked Jan 2 at 2:33

Gopinath KaliappanGopinath Kaliappan

1,46231742

1,46231742

add a comment | 

add a comment | 

1 Answer
1

active

oldest

votes

0

Fabric.js currently has no inbuilt functionality for path boolean operations like add/subtract.

https://github.com/fabricjs/fabric.js/issues/4977

There is however fantastic support for boolean operations built into the paper.js library, so you could rely on paper.js for your path calculations and then bring the new path data back into your fabric canvas.

http://paperjs.org/examples/boolean-operations/

share|improve this answer

answered Jan 2 at 16:01

melchiarmelchiar

293314

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
});


}
});

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

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000590%2fhow-to-merge-touched-paths-in-fabrcjs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

Fabric.js currently has no inbuilt functionality for path boolean operations like add/subtract.

https://github.com/fabricjs/fabric.js/issues/4977

There is however fantastic support for boolean operations built into the paper.js library, so you could rely on paper.js for your path calculations and then bring the new path data back into your fabric canvas.

http://paperjs.org/examples/boolean-operations/

share|improve this answer

answered Jan 2 at 16:01

melchiarmelchiar

293314

add a comment | 

0

Fabric.js currently has no inbuilt functionality for path boolean operations like add/subtract.

https://github.com/fabricjs/fabric.js/issues/4977

There is however fantastic support for boolean operations built into the paper.js library, so you could rely on paper.js for your path calculations and then bring the new path data back into your fabric canvas.

http://paperjs.org/examples/boolean-operations/

share|improve this answer

answered Jan 2 at 16:01

melchiarmelchiar

293314

add a comment | 

0

0

0

Fabric.js currently has no inbuilt functionality for path boolean operations like add/subtract.

https://github.com/fabricjs/fabric.js/issues/4977

There is however fantastic support for boolean operations built into the paper.js library, so you could rely on paper.js for your path calculations and then bring the new path data back into your fabric canvas.

http://paperjs.org/examples/boolean-operations/

share|improve this answer

answered Jan 2 at 16:01

melchiarmelchiar

293314

Fabric.js currently has no inbuilt functionality for path boolean operations like add/subtract.

https://github.com/fabricjs/fabric.js/issues/4977

There is however fantastic support for boolean operations built into the paper.js library, so you could rely on paper.js for your path calculations and then bring the new path data back into your fabric canvas.

http://paperjs.org/examples/boolean-operations/

share|improve this answer

answered Jan 2 at 16:01

melchiarmelchiar

293314

share|improve this answer

share|improve this answer

answered Jan 2 at 16:01

melchiarmelchiar

293314

answered Jan 2 at 16:01

melchiarmelchiar

293314

answered Jan 2 at 16:01

melchiarmelchiar

293314

293314

add a comment | 

add a comment | 

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

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

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000590%2fhow-to-merge-touched-paths-in-fabrcjs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

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

Name

Email

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

Name

Email

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

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here