How do I scale the following base64 image (a background pattern) with transform:scale() or with other methods so, that the pattern would have the same ratio on screens with different resolutions?
Chrome Dev Tools shows that this is a 4x4 px image.
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQYV2NkQAX/GZH4/xkYGBhhAmAOSBJEwDkgAQCCrgQEjpMcPgAAAABJRU5ErkJggg==) repeat
I want to use transform:scale() or other methods to define the size of the image in viewport units instead of pixels, so that the pattern would have the same ratio on all screens.
Do I need to transform it into SVG instead?
Okay, so I realized that it's possible to do something like this:
background: linear-gradient( rgba(10, 14, 15, 0.60), rgba(10, 14, 15, 0.60) ),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQYV2NkQAX/GZH4/xkYGBhhAmAOSBJEwDkgAQCCrgQEjpMcPgAAAABJRU5ErkJggg==) repeat;
background-size: 0.4vw 0.4vw;
But the background pattern is smudgy, not as uniform.
Related
i have an issue that's make admin can upload SVG and using it into Drawing Screen use Konva. The way to import that is ok, but ex-function i would like to ask is:
Is there a ways to help me can change size of that SVG such as inscrease stroke or make it bigger or smaller ?
Imagine the image below is a SVG i had import and import it to Konva Stage, then i would like to change this stroke to bigger than origin.
I had research a while but nothing got back, if you have any idea please comment. I'll read it all with all my respect.
TLDR: No you can't edit a complex SVG in any practical way.
In the comments you confirmed that you are using the Konva Path object and its superpower to consume an SVG drawing instructions as a string via its data() attribute.
This string is a codified set of data containing the SVG commands such as moveto, lineto, etc. To give you an idea of the complexity of the string format, the demo on the Konva site which draws a filled green heart looks like this:
var path = new Konva.Path({
x: 50,
y: 40,
data: 'M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z',
fill: 'green',
scaleX: 0.5,
scaleY: 0.5,
});
The bad news - there is NO built-in way to access the individual drawing commands encoded in this string within Konva.
You can write your own code to manipulate this string if you wish - change the data string and pass it to the Path via pathObject.data(your_string).
Conclusion: I would look for another lib that can achieve this, to use instead or in addition to Konva. I very much like Konva, so my recommendation should underline that to try to edit SVG via mouse -> edit Path.data -> change drawing would be no fun.
Core Problem:
I want to render Text in WebGL.
I don't want to do this via an "overlayed" HTML DOM Element.
I want the actual text rendering to happen inside WebGL.
Initial Solution 1
Render each character as a high number of quads.
This is not good as I need to render many characters.
Initial Solution 2 (implemented + tried this one).
Using Canvas, render all characters into an "atlas/map".
Convert Canvas into a WebGL Texture.
When I need to render a character, just pull it from the Texture.
Problem: Even if the Canvas renders the font at font size 80, and the WebGL renders the font at font size 20, it's still blurry due to various forms of antialiasing, interpolation, and whatever else post processing.
What I think is the right solution. (Not sure, may be wrong on this).
Signed Distance Field: https://www.youtube.com/watch?v=CGZRHJvJYIg
For every pixel, store distance to nearest border.
Question
I am having trouble finding any WebGL implementation of Signed Distance Fields.
Can SDFs work with WebGL, or is there some limitation of WebGL which prevents SDFs from working.
If so, is there some library that will take are of:
actual shader for rendering SDF AND
can take a font and produce the SDFs necessary for rendering?
EDIT: Can someone please verify that the following is a COMPLETE SDF shader?
(copied from https://www.mapbox.com/blog/text-signed-distance-fields/ )
precision mediump float;
uniform sampler2D u_texture;
uniform vec4 u_color;
uniform float u_buffer;
uniform float u_gamma;
varying vec2 v_texcoord;
void main() {
float dist = texture2D(u_texture, v_texcoord).r;
float alpha = smoothstep(u_buffer - u_gamma, u_buffer + u_gamma, dist);
gl_FragColor = vec4(u_color.rgb, alpha * u_color.a);
}
Yes, SDF's perfectly suitable for a WebGL application. For example, Mapbox uses it. The post actually contains SDF shader since it's incredibly simple.
To the second part of your question: it's better to prepare SDF texture for a font beforehand, and there're instruments to do exactly that. This one, for example.
I have a Label. Try to set radial-gradient in my css for this lable.
How can i do it right?
If i set -fx-background-color: radial-gradient(center 50% 50%, radius 50%, rgb(104, 163, 193) 0%, rgb(23, 56, 99) 100%); - I receive an error "mismatched parameters"
Thanks for any help!
Setting gradients for Shapes
Here is an example I pulled from a small clock widget I wrote a long time ago:
-fx-fill: radial-gradient(radius 180%, burlywood, derive(burlywood, -30%), derive(burlywood, 30%));
The gradient shows up as the circular shading on the clockface just below the center of the clock.
Setting gradients for Labels
As you are using a label, the corresponding css attribute to use to shade the text of the label would be -fx-text-fill for the foreground text and -fx-background-color for the text background.
Here is a sample with -fx-text-fill and -fx-background-color styles applied to a label. The radial gradient used for the background is the same radial gradient that was used for the clock face.
Label label = new Label("xyzzy");
label.setStyle("-fx-background-color: radial-gradient(radius 180%, burlywood, derive(burlywood, -30%), derive(burlywood, 30%)); -fx-text-fill: white;");
Actual parameters to use for your gradient depends on your application
Of course, the configuration of radial gradients will vary depending upon exactly what gradient you wish to draw. Documentation for the syntax an construction of an expression to assign a radial gradient via css is contained in the JavaFX 8 CSS reference guide.
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?
I have a function that adds an imageOverlay and a semitransparent Rectangle on top of that image (so as to tint the image, and draw a keyline around it).
activeUserImage = new L.imageOverlay(imageUrl, imageBounds).addTo(map);
activeUserTile = new L.rectangle(imageBounds, {stroke: true, color: "#ffffff", opacity:1, weight: 1, fillColor: "#003572", fillOpacity: 0.7, clickable:true}).addTo(map);
this works great, but then I want to remove the image and rectangle with:
map.removeLayer(activeUserImage);
map.removeLayer(activeUserTile);
This seems to work well...
However when I try and add a second Image & Rectangle (using the same function) the rectangle SVG is being rendered underneath the image, so I don't see the colored overlay.
This seems to be because the element is being left behind from the first creation, and then when the image is being added a second time it appears in front of the SVG.
Q:
Is this a bug? Should the SVG element not be cleared too?
Can I adjust z-index of the image or SVG on creation?
should i be containing to rectangle in a different layer to the images? How?
Many Thanks
OK, so the Leaflet bringToFront() method didn't work, but instead I have used a bit of JQuery to force the same approach.
svgObj = $('.leaflet-overlay-pane svg');
svgObj.css('z-index', 9999);
This works, but still feels like a hack... however if (?) there is a bug in LEaflet, then maybe this will have to do???
Any better ideas?
The bringToFront() function alows you to bring layer to the top.
Search it in the docs.