Is there is any way to magnify fabric js canvas objects magnify?
I have tried with help of so many examples but mostly magnify the image only, i need to magnify any objects present in canvas like rect, circle, text, image
Related
I am using X-window (X11) to render 2D graphics (lines, circles, text...). But rather than drawing to a window, I need to draw to an existing bitmap image. Is there a way to achieve this ? If yes, are there restrictions on the bitmap format ?
(Notice: I am not trying to render an image to a window.)
Create a pixmap via: XCreatePixmap
Create a context via XCreateGC, specifying the pixmap as the drawable.
Transfer the contents of your existing image via XPutImage (see also Transferring Images between Client and Server), specifying the pixmap as the drawable and the related context.
do your renderings via GC Convenience Routines and Graphics Functions
Get the contents from the pixmap via: XGetImage, see also Transferring Images between Client and Server
Save the image data.
How to swtich image in phaser js?
I change profile image but its showing still same but when reload the game image has been changed
With the little details you provided, I think you're looking for Image.setTexture(key: string). This method will set the texture used by an image GameObject to that of "key".
I've a JSON object that defines an image on the canvas like so:
The JSON was created from Fabricjs version 1.7.17 and I'm loading that JSON into a canvas made from Fabricjs versions 2.3.6 & 2.4.1 and this is what the image looks like:
The canvas sizes are the same and the options for the canvas are the same. The JSON loads just fine in the 1.7.17 version. All the other objects from the JSON data load fine, the image box is the right width/height and placement (left & top)...it's just the image isn't scaled to fit.
I've tried setting the scaleX/Y, resize filters to no avail - anyone tackle this issue already?
Fabric 2.0 changed the way that height/width attributes are handled for images in order to support cropping. You'll find an explanation and example code for dealing with this here:
http://fabricjs.com/v2-breaking-changes#image
I've got app based on google maps. Each user is one pin on it.
I want to create pin image basing on user profile photo.
What I need to do is
Resize given image to given size (50x50px)
Make this image circle
Below this image, put base pin image (png) that has place on it for circle photo
Save final image as pin photo
Final image should be png with transparency enabled.
Is there any node library that can do such things?
Imagemagick supports image composition, and node has Imagemagick bindings.
Even though, I guess you can achieve your goal via CSS only:
resize -> browser will do;
make it circle -> border-radius: 50%;
base pin image background -> background-image.
Hy
I have a rendering issue with text in WebGL.
Here the pb:
The first rendering is crappy the second is OK.
The difference is my DOM (nothing related to the HTML DOM):
The difference between the view V2 and V3 is:
V2 is just a green rectangle (composed of 2 GL triangles) and contains a DOM child V4 which is a Text View (means a text, render into a Canvas then copy into a texture)
The blend is done by the GPU
V3 is TextView with a green background. The text is rendered into a Canvas then into a texture (like the V4). And a Shader fill the rectangle and takes the texture to generate the final view => no blend (actually done by the shader)
It should be a problem of blend and texture configuration. But I cannot find the right configuration.
Here my default configuration for the blend:
gl_ctx.disable (gl_ctx.DEPTH_TEST);
gl_ctx.enable (gl_ctx.BLEND);
gl_ctx.blendFunc (gl_ctx.SRC_ALPHA, gl_ctx.ONE_MINUS_SRC_ALPHA);
gl_ctx.clearDepth (1.0);
gl_ctx.clearColor (1, 1, 1, 1);
Thanks in advance for your help.
NOTE 1: A view (Vn) is the basic document object into my WebGL toolkit. It's called internally a Sprite, it's composed basically by 4 vertices, and a vertex and fragment shaders are associated to it, for the rendering purpose.
NOTE 2: If I use this blend configuration:
gl_ctx.blendFunc (gl_ctx.ONE, gl_ctx.ONE_MINUS_SRC_ALPHA);
The text rendering works well but the rest of rendering, specially images had incorrect alpha.
NOTE 3: sorry dont have enough reputation(!!!) to include image in my post :-(
Canvas 2D always uses pre-multiplied alpha so you pretty much have to use the second blendfunc. Can you set that blendfunc just when you render text?