I am using Fabric.js and have a canvas where I can add shapes to.
But when you resize the objects, there is a white space around the edges that keeps growing as you make the shape bigger. Because of this, you cant place the shape perfectly in the corners.
I already tried setting the padding to 0, but this does nothing.
Does someone know how to remove these white spaces?
EDIT: it has something to do with the background, because if i set the background color of the object to the same color they go away. But if I do this the sizes are not accurate.
But I cant figure out how to remove the background
By default, FabricJS objects have a transparent stroke of 1. You can set a strokeWidth of 0 on your objects to avoid this issue.
rect.set('strokeWidth', 0);
See http://fabricjs.com/fabric-gotchas
Related
I have two simple translucent circle sprites that I'm using as fake shadows (shown below) under some characters (not shown below). When the characters get close enough, sometimes their shadow circles can overlap - which is fine - but thanks to the default blending it doesn't look right. I want the shadow circles that do overlap to be visually merged/mixed so they maintain the same opacity, but instead they add together where they overlap like this: I have to imagine there's some way to make this work with a shader, but I'm so bad at shaders that I can't seem to figure it out. Does anyone know how to solve this?
I use ggez and would like to resize the window. The only way I found is
graphics::set_drawable_size(&mut ctx, width, height);
However, when I use it, the white circle I drawn turns into a white ellipse, and a seemingly grey circle appears below. So is there another way of resizing window, one that doesn't distort what is drawn ?
use
graphics::set_screen_coordinates(ctx,rect)
right after declaring changing size with graphics::set_mode(ctx,windowmode) turns the ellipse back into a circle. The gray shape vanishes after reducing the window (this is a pretty obscure thing).
I downloaded a icon, and now i want to reset the color of it, but i'm not good at photoshop, i've set the color of it to be red, but there are to many edges and corners, please tell me how to remove those edges by using photoshop step by step, thanks a lot.
here is the icon i downloaded:
and this is my ugly one:
The best way to alter a single color like this on a simple image such as this is to alter the Hue and Saturation [CTRL / CMD + U]...
This allows you greater color control and keeps the anti-aliased edges of the image intact.
Most beginners alter colors like this by simply selecting the color with the wand, or using the paint bucket on the color. Unfortunately this usually does one of 2 things:
Makes the ragged edges that you saw.
Leaves a halo of the old color as an orphan.
I did this in a few seconds with that tool:
When rendering textures that have an alpha-channel, a white border appears around the non-transparent part (the border seems to be the pixels that have an alpha > 0 and < 1):
The original texture is created in illustrator and exported as a png. here it is:
(well, seems stackoverflow altered the image, adjusting pixels that are not completely opaque/transparent, so here is a link)
it is probably the blending, though i dont know what is wrong with the setup:
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
[Update]
Here is a rendered version, where i added a alpha-gradient to the left part of the texture (so it is getting from 0 opacity to 1 until the half)
this texture is the only texture rendered at this position. it seems to be whitest around a=0.5. really weird. the background is just a cleared color:
gl.clearColor(0.603, 0.76, 0.804, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// render objects here
the depth-function looks like:
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
any ideas? thanks a lot.
[Update 2]
Answering my own question: the effect occurs when the background-color of the canvas or the body of the html-page is white. I don't have an explanation, though.
Use premultiplied alpha and this problem will go away.
See: http://home.comcast.net/~tom_forsyth/blog.wiki.html#%5B%5BPremultiplied%20alpha%5D%5D
This is problem related to texturing linear interpolation. On borders, some interpolated pixels will take half white half green, and 0.5 alpha. You should modify your texture to extend your borders with one more green pixel, even if it is totally transparent.
What's your draw order? This looks like a depth buffering issue to me — you start with a white background, draw the thing with the border so that it's composited on the white, then draw the thing behind the thing with the border. Those areas where the border was blended with the original white background will have stored a value in the depth buffer equal to the depth of their plane, so when the object behind is subsequently drawn, its pixels are discarded in that area.
The general rule is to draw transparent objects after opaque objects, usually from back to front. If you're using additive blending then it's often good enough to disable the depth buffer after the opaque draw and draw them in any order.
When setting the FragColor in the shader, try multiplying the image RGB with the image alpha.
In XAML there is the concept of a [Border] object that behaves much like an SVG rectangle except that a XAML [Border] can contain a child element.
So I could create a [Border] with a black stroke and inside it have another border that had a white stroke and a fill of Green.
This gives the the look of a single rectangle with both a black border & then an inner white border.
How can you create this in SVG?
You need multiple paths. In this particular case you could 'cheat' by having the same path twice, with the lower path having a larger border that appears 'outside' the upper object; in general, though you will need to create paths with offsets if you want this behavior.