How to avoid interruption of .animate method in Fabric.JS
On this script below , red square will move to the clicked point .
let canvas = new fabric.Canvas('canvas', {width: 500,height: 500});
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
canvas.on('mouse:down', function (options) {
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
duration: 500
});
})
But if you click on another point while square is moving , it wil change it's destination on a new point
Why is this happening ?
From my point of view the script flow is this:
1) on mouse down event , .animate callback goes to event que
2) when it fires red square starts changing it's coordinates with calling canvas.requestRenderAll()
3)If you click to other point , another callback (callback2) goes to event que.
It fires relatively fast , so red square changes its destination starting from the point where it was when callback 2 fires
Is this correct ?
How can i avoid such behaivior ? What I need is that red squre move to the first point and no new click would change it's way . Only when square complete it's movement we can choose new point , where it will move
Thank you !
javascript canvas fabricjs
asked Nov 25 '18 at 16:16
Vitozz_RDXVitozz_RDX
595
add a comment |
On this script below , red square will move to the clicked point .
let canvas = new fabric.Canvas('canvas', {width: 500,height: 500});
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
canvas.on('mouse:down', function (options) {
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
duration: 500
});
})
But if you click on another point while square is moving , it wil change it's destination on a new point
Why is this happening ?
From my point of view the script flow is this:
1) on mouse down event , .animate callback goes to event que
2) when it fires red square starts changing it's coordinates with calling canvas.requestRenderAll()
3)If you click to other point , another callback (callback2) goes to event que.
It fires relatively fast , so red square changes its destination starting from the point where it was when callback 2 fires
Is this correct ?
How can i avoid such behaivior ? What I need is that red squre move to the first point and no new click would change it's way . Only when square complete it's movement we can choose new point , where it will move
Thank you !
javascript canvas fabricjs
asked Nov 25 '18 at 16:16
Vitozz_RDXVitozz_RDX
595
add a comment |
On this script below , red square will move to the clicked point .
let canvas = new fabric.Canvas('canvas', {width: 500,height: 500});
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
canvas.on('mouse:down', function (options) {
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
duration: 500
});
})
But if you click on another point while square is moving , it wil change it's destination on a new point
Why is this happening ?
From my point of view the script flow is this:
1) on mouse down event , .animate callback goes to event que
2) when it fires red square starts changing it's coordinates with calling canvas.requestRenderAll()
3)If you click to other point , another callback (callback2) goes to event que.
It fires relatively fast , so red square changes its destination starting from the point where it was when callback 2 fires
Is this correct ?
How can i avoid such behaivior ? What I need is that red squre move to the first point and no new click would change it's way . Only when square complete it's movement we can choose new point , where it will move
Thank you !
javascript canvas fabricjs
asked Nov 25 '18 at 16:16
Vitozz_RDXVitozz_RDX
595
On this script below , red square will move to the clicked point .
let canvas = new fabric.Canvas('canvas', {width: 500,height: 500});
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
canvas.on('mouse:down', function (options) {
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
duration: 500
});
})
But if you click on another point while square is moving , it wil change it's destination on a new point
Why is this happening ?
From my point of view the script flow is this:
1) on mouse down event , .animate callback goes to event que
2) when it fires red square starts changing it's coordinates with calling canvas.requestRenderAll()
3)If you click to other point , another callback (callback2) goes to event que.
It fires relatively fast , so red square changes its destination starting from the point where it was when callback 2 fires
Is this correct ?
How can i avoid such behaivior ? What I need is that red squre move to the first point and no new click would change it's way . Only when square complete it's movement we can choose new point , where it will move
Thank you !
javascript canvas fabricjs
javascript canvas fabricjs
asked Nov 25 '18 at 16:16
Vitozz_RDXVitozz_RDX
595
asked Nov 25 '18 at 16:16
Vitozz_RDXVitozz_RDX
595
asked Nov 25 '18 at 16:16
Vitozz_RDXVitozz_RDX
595
asked Nov 25 '18 at 16:16
Vitozz_RDXVitozz_RDX
595
asked Nov 25 '18 at 16:16
Vitozz_RDXVitozz_RDX
595
595
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
In your click handler, you can immediately make it remove itself before starting the animation, and reattach itself in the onComplete callback:
const canvas = new fabric.Canvas('c');
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
const handler = function (options) {
//remove handler
this.off('mouse:down', handler);
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
onComplete: () => {
//reattach handler
this.on('mouse:down', handler);
},
duration: 2000
});
}
canvas.on('mouse:down', handler);<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="500"></canvas>(I slowed the animation down a bit for testing purposes)
answered Nov 25 '18 at 17:58
shkapershkaper
1,3411814
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
});
}
});
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%2f53469412%2fhow-to-avoid-interruption-of-animate-method-in-fabric-js%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
In your click handler, you can immediately make it remove itself before starting the animation, and reattach itself in the onComplete callback:
const canvas = new fabric.Canvas('c');
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
const handler = function (options) {
//remove handler
this.off('mouse:down', handler);
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
onComplete: () => {
//reattach handler
this.on('mouse:down', handler);
},
duration: 2000
});
}
canvas.on('mouse:down', handler);<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="500"></canvas>(I slowed the animation down a bit for testing purposes)
answered Nov 25 '18 at 17:58
shkapershkaper
1,3411814
add a comment |
In your click handler, you can immediately make it remove itself before starting the animation, and reattach itself in the onComplete callback:
const canvas = new fabric.Canvas('c');
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
const handler = function (options) {
//remove handler
this.off('mouse:down', handler);
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
onComplete: () => {
//reattach handler
this.on('mouse:down', handler);
},
duration: 2000
});
}
canvas.on('mouse:down', handler);<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="500"></canvas>(I slowed the animation down a bit for testing purposes)
answered Nov 25 '18 at 17:58
shkapershkaper
1,3411814
add a comment |
In your click handler, you can immediately make it remove itself before starting the animation, and reattach itself in the onComplete callback:
const canvas = new fabric.Canvas('c');
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
const handler = function (options) {
//remove handler
this.off('mouse:down', handler);
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
onComplete: () => {
//reattach handler
this.on('mouse:down', handler);
},
duration: 2000
});
}
canvas.on('mouse:down', handler);<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="500"></canvas>(I slowed the animation down a bit for testing purposes)
answered Nov 25 '18 at 17:58
shkapershkaper
1,3411814
In your click handler, you can immediately make it remove itself before starting the animation, and reattach itself in the onComplete callback:
const canvas = new fabric.Canvas('c');
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
const handler = function (options) {
//remove handler
this.off('mouse:down', handler);
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
onComplete: () => {
//reattach handler
this.on('mouse:down', handler);
},
duration: 2000
});
}
canvas.on('mouse:down', handler);<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="500"></canvas>(I slowed the animation down a bit for testing purposes)
const canvas = new fabric.Canvas('c');
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
const handler = function (options) {
//remove handler
this.off('mouse:down', handler);
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
onComplete: () => {
//reattach handler
this.on('mouse:down', handler);
},
duration: 2000
});
}
canvas.on('mouse:down', handler);<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="500"></canvas>const canvas = new fabric.Canvas('c');
let square = new fabric.Rect({left: 100,top: 100,width: 50,height: 50,fill: 'red' });
canvas.add(square);
const handler = function (options) {
//remove handler
this.off('mouse:down', handler);
let x = options.e.x;
let y = options.e.y;
square.animate ({ left: x, top: y }, {
onChange: canvas.requestRenderAll.bind(canvas),
onComplete: () => {
//reattach handler
this.on('mouse:down', handler);
},
duration: 2000
});
}
canvas.on('mouse:down', handler);<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="500"></canvas>answered Nov 25 '18 at 17:58
shkapershkaper
1,3411814
answered Nov 25 '18 at 17:58
shkapershkaper
1,3411814
answered Nov 25 '18 at 17:58
shkapershkaper
1,3411814
answered Nov 25 '18 at 17:58
shkapershkaper
1,3411814
1,3411814
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.
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%2f53469412%2fhow-to-avoid-interruption-of-animate-method-in-fabric-js%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
