I started to animate an image in my react-native project but somehow I can't animate the blurRadius property. Translate and Scale are working just fine.
Here is the code I use to interpolate values for blur, scale and translate :
// Compute image position
const imageTranslate = this.state.scrollY.interpolate({
inputRange: [-IMAGE_MAX_HEIGHT, 0, IMAGE_MAX_HEIGHT],
outputRange: [IMAGE_MAX_HEIGHT / 2, 0, -IMAGE_MAX_HEIGHT / 3],
extrapolate: 'clamp',
});
// Compute image blur
const imageBlur = this.state.scrollY.interpolate({
inputRange: [0, IMAGE_MAX_HEIGHT],
outputRange: [0, 100],
extrapolate: 'clamp',
});
// Compute image scale
const imageScale = this.state.scrollY.interpolate({
inputRange: [-IMAGE_MAX_HEIGHT, 0, IMAGE_MAX_HEIGHT],
outputRange: [2, 1, 1],
extrapolate: 'clamp',
});
And this is my Image :
return (
<Animated.Image
blurRadius={imageBlur}
source={this.props.imgSrc}
style={[
animatedImageStyles.backgroundImage,
{ transform: [{ translateY: imageTranslate }, { scale: imageScale }] }
]}
/>
);
I binded the this.state.scrollY value on a ScrollView scroll.
You can add an event listener to get animated blur value and change the state. Then put your blurValue state in blurRadius prop.
this.state.blurAnimation.addListener(({value}) => this.setState({blurValue:value}));
The timing of your issue indicates that the solution should be as simple as upgrading React Native. Blur radius support on images was added in version 0.46. I have just created a new react-native app and implemented 3 animations on an image, one of which was blurRadius, and everything works fine. This is with version 0.49.5. Upgrading should solve your issue!
Note that there currently seems to be an issue on Android, see https://github.com/facebook/react-native/issues/16494
I noticed that blurRadius doesn't work either on iOS with RN 0.48, but 0.49.5 (and possibly earlier) is fine. There's no mention of blurRadius in the release notes for 0.48 and 0.49.
Related
Hi guys so I am looking for a way to animate translateZ ( i use gsap also but doesn't have to be gsap but probably prefered as the rest of my animations use it).
What i'm trying to do.....
so I am trying to have my character face the enemy character on a collision then rotate the player to the opposite rotation of the enemy so its basically facing the opposite way to the enemy character so the player can be repelled backwards when its hit from the enemy...
Where im up to....
so I have managed to do it all basically and it works just fine but without animation:
const dirToPlayer = this._FindPlayer();
const controlObject = object;
const controlObject2 = this._target;
const _R = controlObject.quaternion.clone();
const m = new THREE.Matrix4();
m.lookAt(
new THREE.Vector3(0, 0, 0),
dirToPlayer.negate(),
new THREE.Vector3(0, 1, 0));
_R.setFromRotationMatrix(m);
controlObject.quaternion.copy(_R);
// console.log(dir);
controlObject.translateZ( -10 );
now im not strong in three nor gsap
so here's what i did to try and animate translateZ:
let position = new THREE.Vector3();
object.getWorldPosition(position);
position.add(new THREE.Vector3(0, 0, -10));
gsap.to(object.position, {
duration: 0.6, z: position.z,
onUpdate: function() {
},
});
the above will work but only goes along the positive z axis so sometimes it gets pushed forwards rather than back ...
So what i really need is to animate the TRUE translateZ property any idea's?
thanks
this seems to work:
var ten = {value: 0};
gsap.to((object.translateZ(ten.value), ten), {
duration: 0.6, value: -10,
onUpdate: function() {
object.translateZ(ten.value);
},
});
console.log(object.translateZ(ten.value));
is there any way to add a shape in KonvaJS which draws outside of it's boundries? Basically a "hole" in the layer, so that I can highlight a spot in the canvas by making everything around a circle darker (black with low opacity).
Any help is much appreciated!
Cheers
Edit:
Here is an image of what I mean (I'm not allowed to embed it yet):
https://i.imgur.com/gvTqgN0.jpg
I was hoping there might be something like this:
Konva.Circle({
x: 100,
y: 100,
radius: 50,
opacity: 0.3,
fill: 'black',
inverted: true
})
and this would then in turn "not draw" a circle, but everything around it would then take the given attributes. In this case it would all be darkend a bit besides the circle.
You can do this with a custom shape:
const shape = new Konva.Shape({
width: stage.width(),
height: stage.height(),
// what is color of background ?
fill: 'rgba(0,0,0,0.2)',
sceneFunc: (ctx, shape) => {
// draw background
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(shape.width(), 0);
ctx.lineTo(shape.width(), shape.height());
ctx.lineTo(0, shape.height());
ctx.lineTo(0, 0);
// now cut circle from the background
// we can do this by useing arc
const x = 200;
const y = 200;
const radius = 10;
// but it must be counter-clockwise
// so the last argument true is very important here
ctx.arc(200, 200, 100, 0, Math.PI * 2, true);
ctx.fillStrokeShape(shape);
},
// remove shape from hit graph, so it is not visible for events
listening: false
});
Demo: https://jsbin.com/tevejujafi/3/edit?html,js,output
$("#NoBidsChart").get(0).toBlob(function(value) {
saveAs(value, "Summary.jpg");
});
Here i am using Chart JS(v2.5.0) for rendering charts. When i try to export the charts using Canvas to Blob converter and filesaver.js, i get the black background. So how do i get the image with customized background color(preferably white)?
If you want a customized background color then, you'd have to draw a background with your preferred color, and you can do so, like this ...
var backgroundColor = 'white';
Chart.plugins.register({
beforeDraw: function(c) {
var ctx = c.chart.ctx;
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
}
});
DEMO
// draw background
var backgroundColor = 'white';
Chart.plugins.register({
beforeDraw: function(c) {
var ctx = c.chart.ctx;
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
}
});
// chart
var canvas = $('#NoBidsChart').get(0);
var myChart = new Chart(canvas, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: 'Line Chart',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(255, 0, 0, 0.2)',
borderColor: 'rgba(255, 0, 0, 0.5)',
pointBackgroundColor: 'black'
}]
}
});
// save as image
$('#save').click(function() {
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<button id="save">Save</button>
<canvas id="NoBidsChart"></canvas>
As I stated in my comment to the accepted answer, it bothered me that the beforeDraw event causes the fillRect code to get called multiple times. (Once per data point as far as I can see.)
But I couldn't get that approach to work when called on any other event. However, I just took the coding approach described in this answer and plugged it into code registered to run on the afterRender event and it does just what I want: run once and leave the background white.
Chart.plugins.register({
afterRender: function(c) {
console.log("afterRender called");
var ctx = c.chart.ctx;
ctx.save();
// This line is apparently essential to getting the
// fill to go behind the drawn graph, not on top of it.
// Technique is taken from:
// https://stackoverflow.com/a/50126796/165164
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
ctx.restore();
}
});
Please visit (and up vote) the linked answer to the other posted question.
In React, with react-chartjs-2, i was able to set background color of chart like so:
const plugin = {
beforeDraw: (chartCtx) => {
const ctx = chartCtx.canvas.getContext('2d');
ctx.save();
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, chartCtx.width, chartCtx.height);
ctx.restore();
}
};
And then add the plugin to the chart:
<Line ref={chartRef} data={chartData} options={options} plugins={[plugin]} />
Reference to the Docs
To save the chart as an image:
I created a function that uses the toBase64Image function to extract the image. I attached this function to a button to help me download chart image on click of button.
function downloadImage(){
const link = document.createElement("a");
link.download = `${chart.name || 'chart'}.jpg`
link.href = chartRef.current.toBase64Image('image/jpeg', 1);
link.click();
}
I am using Fabric.js to create some animations on HTML canvas. I need to make this :
If I use image element I cannot make it circular and not put white border.
If I use circle object I cannot put an image in it.
Any ideas will be appreciated. TIA
Try someting like this with clipTo function:
fabric.Image.fromURL(imageURL, function(oImg) {
oImg.scale(1.0).set({
left: 10,
top: 10,
stroke : 'white',
strokeWidth : 100,
clipTo: function (ctx) {
ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
}
});
canvas.add(oImg).setActiveObject(oImg);
canvas.renderAll();
});
Fiddle: http://jsfiddle.net/q6Y6k/8/
When I add an image in canvas and I do a transformMatrix to the image, the roundingBox is shifted.
Look my jsfiddle : http://jsfiddle.net/ULsr4/2/
canvas = this.__canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://icons.iconarchive.com/icons/archigraphs/lovely-bones/256/Tree-icon.png', function(img) {
img.transformMatrix = [1, 0, 0.7, 1, 0, 0];
canvas.add(img);
img.setCoords();
});
canvas.renderAll();
can someone help me ?
Don't know if it still needed for you but try to use group object inside you fabric.Image.fromURL callback, ie:
var group = new fabric.Group([img], {
left: 10,
top: 10
});
canvas.add(group);
group.setCoords();