Nice write up, Justin! I was one of the first engineers at a competitor of TeeSpring's, and we tackled the same problems. We used Fabric.js in our second iteration (first was jQuery).
How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
11–20 of 22 posts
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#12I have used http://fabricjs.com/ in another project (not related to printing). FabricJS is used/developed by printio.ru . Its a good open source alternative.
Fabric.js is canvas-based, so it's a slightly different beast (although between being used in t-shirt designer tools, and having svgcanvas conversion, the ultimate result is the same).
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#13Nice write up, Justin! I was one of the first engineers at a competitor of TeeSpring's, and we tackled the same problems. We used Fabric.js in our second iteration (first was jQuery).
We used fabric.js as well to create custom laser printed/engraved products. As with you, our first iteration was just standard javascript with jQuery, but fabric.js made a lot of things much easier.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#14I have used http://fabricjs.com/ in another project (not related to printing). FabricJS is used/developed by printio.ru . Its a good open source alternative.
I'm using fabricjs for annotations as well and it's a great library. The biggest downfall of using canvas as a renderer as opposed to svg is that it doesn't look great if you provide zoom controls. Lovely crisp SVG paths rendered as pixels on a canvas :/
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#15Nice write up, Justin! I was one of the first engineers at a competitor of TeeSpring's, and we tackled the same problems. We used Fabric.js in our second iteration (first was jQuery).
We have a similar feature at 43Layers (e.g. [1]) and went through a couple iterations. Ours was made more complex because it has to mesh with a 3D canvas, so originally it was a combination of overlapping DOM elements, an SVG element, and a 3D canvas. We also use React, so movement of the selection box created events that generally had to flow through multiple react elements. Getting the coordinates of everything matching in all three contexts was an exercise in annoyance (given how simple it seems), especially for things like fonts which have bounding boxes which bear only a passing relationship with the actual bounding boxes of the text on screen.
Eventually, we ditched the SVG and moved more things into 3D, which made for a better design in the end. For example, now we calculate 3D geometry for the font from its curves and get an actual real bounding box for it.
Anyway, it's interesting to read about how other people solved the same problem.
1: https://www.43layers.com/products/laser-cut-coasters/Custom-...
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#16I have used http://fabricjs.com/ in another project (not related to printing). FabricJS is used/developed by printio.ru . Its a good open source alternative.
I'm using fabricjs for annotations as well and it's a great library. The biggest downfall of using canvas as a renderer as opposed to svg is that it doesn't look great if you provide zoom controls. Lovely crisp SVG paths rendered as pixels on a canvas :/
I think you can implement programmatic zoom on canvas in fabricjs as well. E.g. See this http://www.eraseimage.com/ use mouse zoom on the left canvas.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#17I'm impressed. A coworker and I designed and implemented a T-shirt customization app in Adobe Flex circa 2008 for RushImprint.com. Fun times.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#18Nice write up, Justin! I was one of the first engineers at a competitor of TeeSpring's, and we tackled the same problems. We used Fabric.js in our second iteration (first was jQuery).
We used fabric.js as well to create custom laser printed/engraved products. As with you, our first iteration was just standard javascript with jQuery, but fabric.js made a lot of things much easier.
Do you have a link to your site? I'm working on some similar stuff and would love to see what you've done.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#19Couple years ago I started a side project (inspired by teespring) and I end up using fabic.js https://github.com/imomin/CustomTShirt
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#20Earlier quoted context omitted.
We used fabric.js as well to create custom laser printed/engraved products. As with you, our first iteration was just standard javascript with jQuery, but fabric.js made a lot of things much easier.
Do you have a link to your site? I'm working on some similar stuff and would love to see what you've done.
Hey, sorry I didn't see this before. You can go to www.loveandrobots.com, any example using upswing image files should use fabric.js