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

Object.toCanvasElement doesn't work well for objects in a selection #5952

Closed
av01d opened this issue Nov 5, 2019 · 7 comments · Fixed by #5962
Closed

Object.toCanvasElement doesn't work well for objects in a selection #5952

av01d opened this issue Nov 5, 2019 · 7 comments · Fixed by #5962

Comments

@av01d
Copy link

av01d commented Nov 5, 2019

I'm using Object.toCanvasElement to generate thumbnails of all objects on canvas.
This works beautifully, except for objects that are part of the active selection.

Version

3.4.0

Test Case

http://misc.avoid.org/fabricjs-bug/
(jsfiddle.net is down at this moment)

Information about environment

Nodejs or browser? browser
Which browsers? all

Steps to reproduce

see fiddle

Expected Behavior

Object.toCanvasElement should render all objects on canvas correctly, even if they're part of a selection.

Actual Behavior

Objects part of a selection aren't rendered correctly.

@asturur
Copy link
Member

asturur commented Nov 5, 2019

hi @av01d , i look into this asap.
I would expect it to work for both single objects and full selection and objects inside selection.
I would like to know the code you are using because toCanvasElement has so many options.

@av01d
Copy link
Author

av01d commented Nov 5, 2019

view-source:http://misc.avoid.org/fabricjs-bug/

function showThumbs() {
	var div = document.getElementById('thumbs');
	div.innerHTML = '';
	
	var objs = fabricCanvas.getObjects();
	for (var i = 0; i < objs.length; i++) {
		var obj = objs[i], mw = 100, mh = 75, ow = obj.width, oh = obj.height, canvas;
		var canvas = obj.toCanvasElement({multiplier:Math.min(mw/ow, mh/oh),withoutTransform:true});
		var thumb = document.createElement('div');
		thumb.className = 'thumb';
		thumb.appendChild(canvas);
		thumbs.appendChild(thumb);
	}
}

fabricCanvas.on({
	'selection:created': showThumbs,
	'selection:updated': showThumbs,
	'selection:cleared': showThumbs,
	'object:added': showThumbs,
	'object:modified': showThumbs
});

The important bit is this:

var canvas = obj.toCanvasElement({multiplier:0.2,withoutTransform:true});

The multiplier doesn't matter, can be anything. Omitting withoutTransform also makes no difference.

I've tried playing with the options for toCanvasElement, doesn't seem to make a difference.

@asturur
Copy link
Member

asturur commented Nov 5, 2019

ok so you are using without transform, and you are applying a custom multiplier.
What happens if you run it with default options? do you get bit correct thumbs, or still wrong?

@av01d
Copy link
Author

av01d commented Nov 5, 2019

Still wrong. I've updated the example on http://misc.avoid.org/fabricjs-bug/
Here's the example as ZIP, so you can run it locally: http://misc.avoid.org/fabricjs-bug/bug.zip

@asturur
Copy link
Member

asturur commented Nov 13, 2019

This should be fixed asap and i do not think it should be hard.

@av01d
Copy link
Author

av01d commented Nov 13, 2019

Cool! You'll be rewarded ;-)

@asturur
Copy link
Member

asturur commented Nov 14, 2019

The Pr fixes the most obvious wrong behaviour.
I wonder what should be the interaction of withoutTransform and the group scaling.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants