I know fabricjs can play Video and sprite sheet, But I have a lot of gif files, can I play these gif directly with fabricjs? I am not able to find method in Fabricjs website.
According to specs about the Canvas 2DRenderingContext drawImage method,
Specifically, when a CanvasImageSource object represents an animated image in an
HTMLImageElement, the user agent must use the default image of the animation (the one
that the format defines is to be used when animation is not supported or is
disabled), or, if there is no such image, the first frame of the animation, when
rendering the image for CanvasRenderingContext2D APIs.
This means that only the first frame of our animated canvas will be drawn on the canvas.
This is because we don't have any control on animations inside an img tag.
And fabricjs is based on canvas API, thus regulated by the same rules.
The solution is you need to parse all the still-images from your animated gif and to export it as a sprite-sheet. You can then easily animate it in fabricjs thanks to the sprite class.
Related
Our team is working on creating an online collage.
[https://jsfiddle.net/Lfz1bp7r/3/]
Characteristically, the collage should be under the mask of the PNG file. At this stage we are trying different libraries. Attention on fabricJS. The collage scheme is implemented using SVG paths. The first problem was tracking mouse events in SVG pathways. Implemented manually. The main problem is to add a new picture, which should be above the collage but below the mask. Manipulations with globalCompositeOperation do not help. There are no layers in the fabricJS.
So the question is - will the fabricJS allow you to implement the addition of a new picture on top of the collage, but under the PNG mask? It's possible?
Thank you very much in advance!
FabricJS includes two ways to draw on top of the canvas above the standard object and controls layers. You can set an overlayImage, and you can use the after:render event to run additional draw commands on the canvas context. See the Bounding Rectangle demo for a simple example of how to do this.
See How Fabric Canvas Layering Works.
I have an Easel.js-based canvas and a bunch of SVGs. When I put these SVGs on canvas as vector shapes and try to scale the whole canvas, some SVG contours become distorted / blurred.
Are there any ways to avoid such a behavior?
Problem:
SVG sample:
http://s000.tinyupload.com/index.php?file_id=88515840051764837348
EaselJS support in canvas is restricted to image-based rendering. Basically, it loads the SVG as a raster image. When you scale it, you aren't seeing it redraw the vector, but instead it scales like an image would. If you scale it above 100% it should be more obvious (it will get pixelly/blurry).
Not sure if you can work around this with an SVG source. You could bring paths into Adobe Animate, and export as raw EaselJS Graphics, which will scale more predictably.
Cheers,
I searched the web but still confused that what are/is the difference(s) between sprite and png?
A PNG (Portable Network Graphics) is a file format, famous for enabling transparent backgrounds because of it's Alpha channel.
The Sprite is a image used in design, the file format doesn't matter, but in most cases it's used as PNG or GIF, because of the transparent background.
You can use sprites to make a movement of a character in gaming, or a spritesheet full of images used in web design where you link the coordinates of the desired sprite.
I'd like to improve upon jQuery's dialog code by using CSS-sprites, and thus also add animations of the dialog borders.
To do this, i'd like all the artwork to be in 1 png file, a css sprite.
My problem is that in order to support a dialog that maximizes to 2 or 3 monitors, i think i'd have to put 5000px wide / high border graphics in the css sprite file. Because i can't find a way to resize a selected portion of a css sprite image.
Basically i want to resize from the sprite image a region (t,l,w,h) to a DIV or IMG on my page with a different width and height.
I'd like to know, is this even possible? It seems background-position does not support this at all.
I've tried the first solution in How can I scale an image in a CSS sprite, but could not get it to work using that.
I've tried using the new background-size property in conjunction with background-position, but that also does not produce the results i want.
Spent another few hours twiddling with css, but could not get sprites to work for dialogs.
But my animated dialogs don't need many frames (not unless you want to put actual video as a dialog backdrop online), so for the dialog theme i'm designing now i have 8 312x312 png's as frames, 8 requests, 386kb total. Just enough to create a glowing animation for when the dialog is in a "highlighted" state. It's do-able.
I'm using the technique from How can I scale an image in a CSS sprite
See http://mediabeez.ws in about a month for the opensource release of animated dialogs.
I will be developing and testing this standalone component when it's used by my own homegrown CMS, so it will have the ability do be themed, dragged and dropped, things like that.
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google: