I could not move the Label down away (e.g. 30px) from x axis although margin and padding were used.
<XAxis
dataKey="week_of_year"
tick={{ fontSize: '12px' }}
>
<Label
position='insideBottom'
offset={10}
value="Week of year"
style={{ fontSize: '80%', fill: 'black', padding: '100px' }}
/>
</XAxis>
Your suggestion is highly appreciated!
You can use dx and dy properties of <Label />
For example:
Related
I have tried this code in REPL but couldn't find any working example. I am trying to free drawing on canvas using fabric pencil brush, however, this is only a rectangle:
<script>
const fabric = () => {
fabric = new window.fabric();
}
function drawMD(){
let canvas = new fabric.Canvas('c')
let rect = new fabric.Rect({
left:150, top, 150, fill: 'red, width: 200, height: 200, angle: 45
})
canvas.add(rect)
}
</script>
<svelte:head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/500/fabric.min.js" on:load={fabric}></script>
</svelte:head>
<div className="MarkdownEditor">
<canvas id="c" width="600" height="600" style="border:1px solid #000000;" on:click={drawMD}>
</canvas>
</div>
You don't need the window part, there are some typos in the Rect object and className won't work in Svelte. If you want to directly draw without having to click on the canvas, you can do this inside onMount. Here's a working REPL
(when opening the REPL there might be an errorfabric is not defined - just move the <svelte:head> one line down, then it's working...)
<svelte:head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/500/fabric.min.js"></script>
</svelte:head>
<script>
import {onMount} from 'svelte'
onMount(() => {
let canvas = new fabric.Canvas('c2')
let rect = new fabric.Rect({
left:120, top: 10, fill: 'teal', width: 150, height: 150, angle: 45
})
canvas.add(rect)
})
function drawMD(){
let canvas = new fabric.Canvas('c')
let rect = new fabric.Rect({
left:120, top: 10, fill: 'red', width: 150, height: 150, angle: 45
})
canvas.add(rect)
}
</script>
<div class="MarkdownEditor">
<canvas id="c" width="250" height="250" style="border:1px solid #000000;" on:click={drawMD}></canvas>
</div>
<canvas id="c2" width="250" height="250" style="border:1px solid #000000;"></canvas>
I want create a rotate icon inside a image:
<ImageBackground style={stylesNative2.image} source={{ uri }} >
<TouchableOpacity onPress={ () => { alert("handler here") }} tyle={styles.rotateImageIcon}>
<Icon name='rotate-ccw' type='Feather' style={styles.rotateImageIcon} />
</TouchableOpacity>
</ImageBackground>
const stylesNative2 = StyleSheet.create({
image: {
zIndex: 0,
position: 'absolute',
height: h,
width: WIDTH,
resizeMode: 'cover',
transform: [{ rotate: this.state.imageRotation + 'deg' }]
}
});
const styles = StylesManager.getStyles({
rotateImageButton: {
backgroundColor: 'transparent',
elevation: 0,
zIndex: 1
},
rotateImageIcon: {
marginTop: '1rem',
marginLeft: '1rem',
fontSize: '1.7rem',
color: 'white',
}
});
The icon appear but the TouchableOpacity is not working.
Any idea why it's not working?
I think it's because ImageBackgroud have a pointerEvent like this one:
pointer-events: none;
http://facebook.github.io/react-native/docs/view#pointerevents
Can you try to wrap your <TouchableOpacity> on a <View>?
Mayby it's the zIndex...
A touchable opacity is transparent so you don't have to add zIndex on it.
When we add TouchableOpacity inside the ImageBackground .
We need to add the zindex greater than ImageBackground.
like zindex:100
Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position: fixed
I'm building a recording app and I'm trying to render a waveform. The waveform's data is simply an array of numbers with a max length of 100. I iterate through the waveform array and render 100 <View />'s like so:
<View style={{ width: screenWidth, position: 'relative' }}>
{
this.state.waveforms.map((waveform, i) => {
return (
<View
key={waveform.key}
style={{
position: 'absolute',
top: WAVE_FORM_MAX_HEIGHT - waveform.value + (waveform.value / 2) - WAVE_FORM_MAX_HEIGHT,
left: screenWidth - (i * TOTAL_WAVE_FORM_WIDTH),
width: WAVE_FORM_MAX_WIDTH,
height: waveform.value,
backgroundColor: '#CC0000',
borderRadius: 2
}}
/>
)
})
}
</View>
The number of views always stays the same but the RAM continues to increase. Any ideas?
The problem I'm having is that the image inside the image, is on top of the outside image, the outside image is a half transparent image so I want it to be ON TOP of the nested image, as an overlay image, what can I do?
<Image
style={it}
source={require('../../img/Rarities/red.png')}
>
<View>
{
item[2] != null ?
<View style={{ width: 15, height: 15, backgroundColor: item[2].Color }} />
: null
}
<Image
style={{height:'70%',width:'70%'}}
source={{ uri: item[1].base64 }}
/>
</View>
</Image>
I tried:
changing the zIndex of the images didn't work..
In React Native, components are rendered in the order they are defined - therefore it can be tricky to reverse the order and render a parent on top of a child.
Instead, you can render the images as siblings, and use a parent container component with a little position: absolute trickery to get the images to align on top of each other.
For the following view structure:
<View style={styles.imageContainer}>
<Image source={{uri: image1}} style={styles.bottom} />
<Image source={{uri: image2}} style={styles.top} />
</View>
You can achieve this effect with following styles. See inline comments for explanation:
const styles = StyleSheet.create({
// The container controls the top image size
imageContainer: {
width: 200,
height: 200
},
bottom: {
// horizontal margin: (100% -width) / 2
marginHorizontal: '15%',
// vertical margin: (100% - height) / 2
marginVertical: '15%',
width: '70%',
height: '70%'
},
top: {
// positioned absolutely
position: 'absolute',
opacity: 0.5,
// full width/height of imageContainer
width: '100%',
height: '100%'
},
});
You can see it in action in this Snack demo.
I'm not sure that i understand what are you meaning correctly but you can use the Image components like this if you want to have them inside each other:
<View>
<Image
style={{flex:1}}
source={require('./img/favicon.png')}
/>
<Image
style={{height:'30',width:'30', position:'absolute'}}
source={require('./img/favicon.png')}
/>
</View>
Note: the Image sources and the dimensions should be replaced.
I'm developing an app with React-Native.
I want to put an icon on right-bottom corner of an image component, but it always stays on the left-top corner.
Any help? Thank you very much.
<Image source={imageSource} style={{position: "absolute", bottom: 0, right: 0}}/>
You can use justifyContent: 'flex-end' to achieve this:
const withWatermark = (asset, logo) => (
<Image style={{ width: 200, height: 200, justifyContent: 'flex-end' }} source={asset}>
<Image style={{ width: 20, height: 20, alignSelf: 'flex-end' }} source={logo} />
</Image>
);
You can do something like this...
Use this : position: "absolute", bottom: 0, alignSelf: "flex-end"
<ImageBackground
source={require("../assets/homeAssets/3.jpg")}
style={{
height: 140,
width: 140,
resizeMode: "contain",
alignItems: "center"
}}
imageStyle={{ borderRadius: 70 }}
>
<View
style={{
height: 50,
width: 50,
borderRadius: 25,
backgroundColor: "#99AAAB",
alignItems: "center",
justifyContent: "center",
position: "absolute", //Here is the trick
bottom: 0,
alignSelf: "flex-end"
}}
>
<Entypo name="camera" size={25} color="#FFF" />
</View>
</ImageBackground>