I'm trying to draw an img to a canvas. However, styles aren't carrying over, whether I set the style attribute or do it in the CSS.
Here's a JSFiddle showing what I'm trying to do.
I've also tried applying the styles to the canvas itself. This displays correctly, but when I perform canvas.toDataURL(...) it doesn't get the styles.
Is there some other way to apply styles to the generated data?
To apply filters to your canvas content, you can use the cutting-edge filter property, which uses the same syntax the CSS filter property. Before you draw your image, do
context.filter = "grayscale(1)";
And you can reset it for anything else you do in the future by
context.filter = "none";
Your filtered image will remain correctly filtered -- the filter property basically tells the canvas context, "Whatever I draw from now on should have this filter applied," so changes only affect future drawing operations.
Related
I do have some pictures, and I need to crop them in a circular shapes before using them in React Native to use as ViroImage in react-viro (a library that render 360Images).
I can not apply much styles to the pictures and the borderRadius doesn't seem to solve my problem.
create a container with border radius = 30 and then place your image inside it
I've created react-native-image-tools-wm library when I had to process an image on the client and couldn't find anything worth using. Try it.
Example:
const image = Image.resolveAssetSource(require('./my-image.jpg)).uri;
const maskImage = Image.resolveAssetSource(require('./mask-image.png)).uri;
RNImageTools.mask(image, maskImage).then(({ uri, width, height }) => {
// Sync with your app state
});
Please note that your mask image should be black on white on iOS and black on transparent on Android. Black part will be replaced with your image and white/transparent will become transparent. You can use .android and .ios suffix on names and RN will load them conditionally.
You can also create a mask using createMaskFromShape method but you'll have to generate shape points yourself.
I want to reuse my basic style function to create an select style by overwriting some of the properties.
This approach is working for fill/stroke colors of linestrings, polygons and texts, but not for images (a circle in my case).
I don't want to create a new image since other properties should be retained.
var selectStyleFunction = function(feature, resolution) {
var style = styleFunction(feature, resolution)[0];
style.getImage().getFill().setColor("magenta");
console.log(style.getImage().getFill().getColor());
return [style];
};
In this fiddle you can see, that the above code doesn't change the feature style on selection although the log output is correct.
Is there any way to overwrite this property?
I found an answer to my question in the api dokumentation of openlayers. It was too obvious to find it in the first place.
https://openlayers.org/en/latest/apidoc/ol.style.Style.html
ol.style.Style
Container for vector feature rendering styles. Any changes made to the style or its children through set*() methods will not take effect until the feature or layer that uses the style is re-rendered.
So rendering is not triggered by the setters.
I'm trying to store a fabric.js canvas with a background image type rect. On recovery the background image wont show up.
Here is a jsfiddle demonstrating the issue: http://jsfiddle.net/revpz6qw/
After clicking "save and restore" the background is blank instead of yellow.
I can't find the problem.
thanks
It does not recover because the background is supposed to be of type Image or simply a color.
It is rendering on add because the function does not take in consideration the type of object that you are passing. But the restore function does not handle it.
Alternatively you can place an object as first object and set its property evented to false.
rect.scaleWidth(canvas.getWidth());
rect.scaleHeight(canvas.getHeight());
rect.evented = false;
canvas.add(rect);
If I create a Label using Raphael, the default style is a black block with white text.
How can I change the background box colour, but not the text colour? I've tried:
paper.label(x, y, value).attr("fill", colour)
but that also fills the text and I end up with invisible text.
I also can't simply change the default colour in this function because I need to have a few different ones depending on a line that it's added to:
As you noticed,
Paper.label(x, y, value).attr(
fill : color
);
changes both the background fill color and the text fill color, resulting in invisible text.
Unspecified correctly explained that this is an array, so each portion must be altered separately, as they illustrated. However, they didn't mention the easiest way to change update both sets of attributes, so I wanted to share this tip. In order to do this, change the attributes into an array with two sets. The first element is the background, and the second is the text.
Paper.label(x, y, value).attr([{
fill : backgroundColor
}, {
fill : textColor
}]);
You can add any other applicable attributes to each part. Here is a working example: http://jsfiddle.net/VzpeG/1/
I was working on a graph similar to this and used:
.attr({fill: "#EF7C4D"})
Let me know how this goes...
var r = Raphael('divID', 320, 220);
text = r.text(100,100,"Hello").attr({fill:"#fff"});
text.label().attr({fill:"#f00"});
Here's a working fiddle http://jsfiddle.net/vpGyL/216/
Set any color on text or on label both apply separately...Hope this helps !
Digging in furthur...Paper.label(x,y,text) is different from Element.label()
If you look at the source code Paper.Label(x,y,text) is a set of rectangle element & text element, so doing .attr({fill:"SomeColor"}) applies to the entire set, hence both rectangle & text share same color(Hence the invisibility).
Oh yeah If you just want to change the text color do this Raphael.g.txtattr.fill = "#yourColorCode" But this changes the text color globally on all the charts and tooltips(don't seem to be a good idea).
While Element.Label as the documentation says is takes the context element & embed in a label tooltip, basically whatever element you use, applying .label will embed it inside a rectangle
Hi is there a way of using javascript for example using buttons to change colour of an svg shape? If so could someone please guide me in the right direction thanks
If you have a number of these shapes, then look at the d3 library, which is designed explicitly to allow you to bind data to svg attributes. A good explanation of the way it works is the Three little circles tutorial.
If you want to just change an attribute of an svg shape on a button click, then you need an onclick handler for the button:
function handleClick() {
// code to modify svg here, e.g.:
document.getElementById('svgShapeId').setAttribute('cx',150);
}
document.getElementById('buttonId').onclick = handleClick;
Here's an example of using JS to create animation elements to highlight colors based on mouse over/out:
http://phrogz.net/SVG/change-color-on-hover.svg
Here's an example of an SVG that changes lots of colors, and house some silly mouseover buttons:
http://phrogz.net/SVG/rgbhsv.svg
Here's an example that shows SVG in XHTML, with both native HTML widgets (an HTML5 slider) as well as draggable SVG elements (the path handles):
http://phrogz.net/SVG/area_of_path.xhtml
In general:
Find elements
Attach event handlers
In the event handlers, adjust properties (either via setting XML attributes or via the SVG DOM)