I am unable to align my text to center on my canvas, nor can I get the text to wrap to a new line when the length exceeds the length of the canvas.
import { Layer, Stage, Text } from 'react-konva';
render() {
return (
<Stage height={500} width={500}>
<Layer>
<Text fontSize={60} text="`HEYYYYYYYYYYYYYYYYYYYYYYY`"
wrap="char" align="center" />
</Layer>
</Stage>
)
}
It works just fine. Width of a text is not limited by canvas size. Instead it is limited by its own width property.
If you don't set width it will be unlimited.
<Text
fontSize={60}
text="HEYYYYYYYYYYYYYYYYYYYYYYY"
wrap="char"
align="center"
width={700}
/>
http://jsbin.com/dolegimuvi/1/edit?js,output
Related
I'm trying to draw rectangles on image using x,y,height and width but i can only able to draw one rectangle at a time can't able to draw multiple rectangle in single image.
JSX code:
{this.state.books.map((object) => (
<div class="img-overlay-wrap"style={{ marginLeft: "27%" }}>
<img src={`data:image/png;base64,${object.image_id}`} style={{ height:`${object.hw[0]}` , width:`${object.hw[1]}`}} alt="" />
<svg width={object.hw[1]} height={object.hw[0]} >
<g >
<rect x={object.bbox[0]} y={object.bbox[1] - object.bbox[3]} width={object.bbox[2]} height={object.bbox[3] }
style={{stroke:"red",}} fill-opacity="0.0" />
<text x={object.bbox[0]} y={object.bbox[1]} font-family="Verdana" font-size="35" fill="red">{object.category_id}</text>
</g>
Sorry, your browser does not support inline SVG.
</svg>
<h3>Confidence:{object.score}</h3>
<h3>Category Id:{object.category_id}</h3>
<p>{object.bbox[0]},{object.bbox[1]},{object.bbox[3]},{object.bbox[2]}</p>
</div>
))}
i am using map function to iterate through the array but i couldn't able to draw all the rectangles in single image please help me
I've done This, and it worked for me, maybe it is useful for you:
const rectInfos = [
[{top:"0px",left:"0px",color:"green"},{top:"0px",left:"500px",color:"yellow"}],
[{top:"150px",left:"0px",color:"blue"},{top:"150px",left:"500px",color:"black"}],
]
const rects = rectInfos.map((row,i)=>
row.map((svgElement,j)=>
<svg key={`i+${i}+${j}+j`} style={{width:"500px", height:"150px",position: "absolute", top:svgElement.top, left:svgElement.left}}>
<rect style={{fill:svgElement.color, width:"500px", height:"150px"}} />
</svg>
)
)
return (
<div style={{position: "relative", width:"1000px", height:"300px"}}>
{rects}
</div>
)
}
This case is for 4 rectangles with the same width and height in a parent div.
I'm adding a VisX graph inside Semantic-UI-React Modal.
The graph by itself shows the tooltip, crosshair and series glyphs correctly:
But when it's in a modal, all those appear beneath the modal:
I can reconstruct the tooltip with a higher z-index in the component I supply for the renderTooltip property, but it's lacking the crosshair and series glyph:
As these elements are added to the DOM on hover, it's impossible for me to catch them int he devtools and see what styles they have and inherit.
Is there some way I can set their z-index or fix this in some other way?
const Visx: FC = () => {
return (
<Modal open>
<Modal.Content>
<XYChart width={900} height={500} xScale={{ type: 'time' }} yScale={{ type: 'linear' }}>
<Grid rows numTicks={maxCount + 1} />
<Axis
orientation="left"
label="Play count"
numTicks={maxCount + 1}
tickFormat={(value) => {
return value;
}}
/>
<Axis orientation="bottom" label="Date" />
<LineSeries dataKey="plays" data={data} {...accessors} />
<Tooltip
showHorizontalCrosshair
showVerticalCrosshair
snapTooltipToDatumX
snapTooltipToDatumY
showSeriesGlyphs
showDatumGlyph
renderTooltip={({ tooltipData }) => {
const datum = tooltipData.nearestDatum?.datum as DataPoint | null;
return (
<div>
{datum?.count || 'no'} plays on {moment(datum?.date).format('MMM D, YYYY')}
</div>
);
}}
/>
</XYChart>
</Modal.Content>
</Modal>
);
};
Fixed it by adding this global CSS style:
.visx-tooltip {
z-index: 9999; /* or whatever height is appropriate */
}
I'm Having a hell of a time trying to get custom labels on a recharts radar chart working. I've tried doing multiple things according to the docs so I figured I'd throw it to the wolves. Hopefully one of you can point me in the right direction.
<ResponsiveContainer>
<RadarChart outerRadius={125} cy={175} data={ucRadarData}>
<Legend verticalAlign='top' height={36} />
<PolarGrid />
<PolarAngleAxis dataKey='value'>
<Label content={({ value }) => <Typography>{value}</Typography>} /> // When I remove this component, the labels get removed as well so I assume this is the component I want to target.
</PolarAngleAxis>
<PolarRadiusAxis domain={[lowestRangeStart, highestRangeEnd]} tickCount={tickArray.length} />
<Radar label={({ label }) => <Typography>{label}</Typography>} name='Self Assessment' dataKey='Self' stroke='#8884d8' fill='#8884d8' fillOpacity={0.6} /> // Also tried adding custom label here.
</RadarChart>
</ResponsiveContainer>
Do this:
Make a render function for custom tick and add that as tick prop to your PolarAngleAxis component
function customTick({ payload, x, y, textAnchor, stroke, radius }) {
return (
<g
className="recharts-layer recharts-polar-angle-axis-tick"
>
<text
radius={radius}
stroke={stroke}
x={x}
y={y}
className="recharts-text recharts-polar-angle-axis-tick-value"
text-anchor={textAnchor}
>
<tspan x={x} dy="0em">
{payload.value}
</tspan>
</text>
</g>
);
}
<PolarAngleAxis dataKey='value' tick={customTick}/>
I am new to both React and Grommet and have worked through the getting started tutorial. When I add a google map to the main container it renders and fills the whole screen. However, when I click the notification icon to load the sidebar it only renders in a tiny column on the side. Is there a way for me to edit the style to adjust the width automatically or do I need to have the container width as a property that changes when the button is clicked? (Please excuse any question format errors as this is my first post.)
I have tried looking through the Grommet box props and various CSS style settings without success.
App.js:
const { showSidebar } = this.state;
return (
<Grommet theme={theme} full>
<ResponsiveContext.Consumer>
{size => (
...
<Box direction='row' flex overflow={{ horizontal: 'hidden' }}>
<Box
align='start'
justify='start'
fill='horizontal'
responsive='true'
>
<MapContainer />
</Box>
{!showSidebar || size !== 'small' ? (
<Collapsible direction='horizontal' open={showSidebar}>
<Box
flex
width='medium'
background='light-2'
elevation='small'
align='center'
justify='center'
>
sidebar
</Box>
</Collapsible>
) : (
...
}
</Box>
</Box>
)}
</ResponsiveContext.Consumer>
</Grommet>
);
MapContainer.js:
return (
<Map google={this.props.google} zoom={14}/>
);
I would like the map to shrink to fill the container/the container to shrink when the sidebar loads.
I'm trying to only have one column in a grid. But the prop columns={1} is not working. And the columns are not taking the whole width of the window.
This is the code where I return the component.
return (
<Grid columns={1} textAlign='center' container divided='vertically'>
<Grid.Column width={6}>
<Search fluid size='huge'
loading = {isLoading}
onResultSelect = {this.handleResultSelect}
onSearchChange = {this.handleSearchChange}
results = {results}
value = {value} />
{this.state.rides}
</Grid.Column>
<Grid.Column width={10}>
<Image src={faker.image.avatar()} style={{ backgroundSize: 'cover' }} />
</Grid.Column>
</Grid>
);
Image of how it looks at present.
In fact, it's wrong usage of props, columns and width can't be combined. Take a look on this issue on Github, it contains more info about Grid. Also, you can check official docs of SUI.
This is because of the width prop you have on your Grid.Column sub-components. The width for each child column should add up to the total number of columns you have specified.
You could add multiple Grid.Column components to the following layout and they will all appear in a single column:
<Grid
columns={1}
textAlign="center"
container
divided="vertically"
>
<Grid.Column>
...
</Grid.Column>
<Grid.Column>
...
</Grid.Column>
</Grid>
What is the result you are trying to achieve?
I set up an example to play around with at the following URL: https://codesandbox.io/s/pyvqv1k01m