I am trying to simulate gradually "filling" (like water filling a cup) an element in SVG. I run into trouble with mask. For the following, assume inclusion of snap.svg-min.js:
<script>
var s = Snap(500,500);
var a = s.rect(0,100,100,100);
var b = s.ellipse(50,50,30,60);
b.attr({
fill: "white"
});
a.animate({transform: 't0, -100'}, 500, mina.easin);
a.attr({
mask: b
});
</script>
The mask in the a.attr clips the image initially, and shifts that up. I want to fill the ellipse going up.
Somewhat like the inverse of the following:
<script>
var s = Snap(500,500);
var a = s.rect(0,100,100,100);
var b = s.ellipse(50,50,30,60);
b.attr({
fill: "white"
});
a.animate({transform: 't0, -100', mask: b}, 500, mina.easin);
</script>
You're partly there, there's a few different ways, you could probably also use a clip rather than a mask, but here's the way along the lines I think you were trying...
Swap the mask around..
var a = s.rect(0,0,120,120).attr({ fill: 'white', transform: 't0,100' });
var b = s.ellipse(50,50,30,60);
b.attr({
fill: "red",
mask: a
});
a.animate({transform: 't0,60' }, 2000, mina.easin)
jsfiddle
Related
My gpx file already contains elevation information for each trkpt and I can augment this with a speed for each trkpt. I would like to represent the elevation or the speed at each trkpt by varying the color of the track. For instance: slow is blue, fast is red.
How can I do this?
And this probably means: Which files and functions in Openlayers do I have to change to do this?
You can try the ol/style/FlowLine of ol-ext to achieve this.
Using this style, you can change the with/color of the feature along the line using a function. This example show how to: http://viglino.github.io/ol-ext/examples/style/map.style.flowline2.html.
You just have to calculate the width (or color) along the feature geometry varying according the speed or altitude:
const flowStyle = new ol.style.FlowLine({
width: function(f, step) {
// calculate the with of the feature f at the given step
// step is the curvilinear abscissa between 0,1
// (0: first coordinate, 1: last one)
const width = ...
return width;
}
});
#+
You should go with a stylefunction for the vector layer:
https://openlayers.org/en/v4.6.5/apidoc/ol.html#.StyleFunction
This function is checked for each feature to be displayed on the vector layer and the related style can be set/returned programmatically. For example:
function gpxStyle(feature) {
var style = null;
if (feature.get("speed")>="100") {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'red'
})
})
});
}
else {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
}),
fill: new ol.style.Fill({
color: 'blue'
})
})
});
}
return [style];
}
var gpxLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: gpxStyle
});
I'm using loadSVGfromURL to fill a canvas with this SVG
As you can see in the link, I got some Heather effect on my shirt, along with some shadows. Plus, my SVG style applies a mix-blend-mode: multiply; to my paths.
Unfortunately, once rendered in my canvas, it seems like the paths CSS is not taken into account :
How can I make sure that this style is applied ?
Here is an exemple. Basically you need to map mix-blend-mode to globalCompositeOperation
var site_url = 'http://s3.eu-central-1.amazonaws.com/balibart-s3/SVGMockups2/59f32980b5d8493ef7f29904/front/Layer.svg';
canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL(site_url, function(objects) {
var group = new fabric.Group(objects, {
left: 165,
top: 100,
});
canvas.add(group);
group._objects[3].globalCompositeOperation='multiply';
group._objects[2].globalCompositeOperation='multiply';
group._objects[4].globalCompositeOperation='multiply';
group._objects[5].globalCompositeOperation='multiply';
group._objects[6].globalCompositeOperation='multiply';
/*for(var i=0;i<objects.length;i++){
canvas.add(objects[i]);
}
canvas.getObjects()[5].globalCompositeOperation='multiply';*/
// canvas.add(objects);
canvas.renderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id='canvas' width="900" height="900"></canvas>
I have just upgraded from fabric 1.7 to 2 and now the image object is behaving differently.See the screenshot, the image where the arrow is is completely ignoring the fact that i set a width on it, it looks like it's actually scaling it based on the given height to keep the image ratio. I don't want this to happen, the image needs to stretch to the size i tell it to.
Anyone have any idea to stop it doing this? I mean if i set a width in the options for the image object i expect it to respect those dimensions. It should be stretching to fill where the red box is.
This is happening when loading the image initially as a square and setting {width:1000,height:400} for example, but instead it looks like it's taking the height and scaling the width down to keep it square.
You need to set scaleX for width and scaleY for height. It's a breaking change for v2.
DEMO
var canvas = new fabric.Canvas('c');
var index = 0,
json;
var url = '//fabricjs.com/assets/pug.jpg';
fabric.Image.fromURL(url, function(img) {
var elWidth = img.naturalWidth || img.width;
var elHeight = img.naturalHeight || img.height;
img.set({
scaleX:200/elWidth,
scaleY:200/elHeight
})
canvas.add(img);
})
canvas{
border:2px solid #000;
}
<script type="text/javascript" src="
https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
I'm developing a diagram tool based on fabricjs. Our tool has our own collection of shape, which is svg based. My problem is when I scale the object, the border (stroke) scale as well. My question is: How can I scale the object but keep the stroke width fixed. Please check the attachments.
Thank you very much!
Here is an easy example where on scale of an object we keep a reference to the original stroke and calculate a new stroke based on the scale.
var canvas = new fabric.Canvas('c', { selection: false, preserveObjectStacking:true });
window.canvas = canvas;
canvas.add(new fabric.Rect({
left: 100,
top: 100,
width: 50,
height: 50,
fill: '#faa',
originX: 'left',
originY: 'top',
stroke: "#000",
strokeWidth: 1,
centeredRotation: true
}));
canvas.on('object:scaling', (e) => {
var o = e.target;
if (!o.strokeWidthUnscaled && o.strokeWidth) {
o.strokeWidthUnscaled = o.strokeWidth;
}
if (o.strokeWidthUnscaled) {
o.strokeWidth = o.strokeWidthUnscaled / o.scaleX;
}
})
canvas {
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>
There is a property called: strokeUniform
Use it like this
shape.set({stroke: '#f55b76', strokeWidth:2, strokeUniform: true })
I have found what feels like an even better solution, works really well with SVG paths.
You can override fabricjs' _renderStroke method and add ctx.scale(1 / this.scaleX, 1 / this.scaleY); before ctx.stroke(); as shown below.
fabric.Object.prototype._renderStroke = function(ctx) {
if (!this.stroke || this.strokeWidth === 0) {
return;
}
if (this.shadow && !this.shadow.affectStroke) {
this._removeShadow(ctx);
}
ctx.save();
ctx.scale(1 / this.scaleX, 1 / this.scaleY);
this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke);
this._applyPatternGradientTransform(ctx, this.stroke);
ctx.stroke();
ctx.restore();
};
You may also need to override fabric.Object.prototype._getTransformedDimensions to adjust the bounding box to account for the difference in size.
Also a more complete implementation would probably add a fabric object property to conditionally control this change for both overridden methods.
Another way is to draw a new object on scaled and remove the scaled one.
object.on({
scaled: function()
{
// store new widht and height
var new_width = this.getScaledWidth();
var new_height = this.getScaledHeight();
// remove object from canvas
canvas.remove(this);
// add new object with same size and original options like strokeWidth
canvas.add(new ...);
}
});
Works perfect for me.
i'm using OL3 and javascript to draw several polygon on a map. Each polygon came from a database in WKT format like "POLIGON((39 -9, ....))". I can draw them on the map but i want to change fill color of each one, but don't know how to do it.
Here is my code:
//WKTpoly -> this is my array of POLYLINES
var format = new ol.format.WKT();
var vectorArea = new ol.source.Vector({});
for (var i=0;i<WKTpoly.length;i++) {
var featureGeom = format.readFeature(WKTpoly[i]);
featureGeom.getGeometry().transform('EPSG:4326', 'EPSG:3857');
vectorArea.addFeature(featureGeom);
}
VectorMap = new ol.layer.Vector({
name: map,
source: vectorArea,
});
map.addLayer(VectorMap);
Well, after LessThanJake response and some more google search, i found the solution, i had to create a style and call setStyle() before addFeature():
(...)
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: FillColor,
weight: 1
}),
stroke: new ol.style.Stroke({
color: LineColor,
width: 1
})
});
featureGeom.setStyle(style);
(...)
Thanks LessThanJake for pointing the right direction.
Or you can setup the layer to use a function as style
the function signature is
var makeStyle = function(feature,resolution) {
return [styles];
};
You can use this to manage style by feature and resolution (zoom level).
As the function is called at each feature render, you'll need to cache the style in a js object to gain performance.