I created an Orbital Controls with a boxGeometry to render a box. However, when I zoom to my desired distance from the box, the corners of the box do not get rendered like so:
I am currently using react-three-fiber and react-three-drei
const SceneItems = () => {
return (
<>
<OrbitControls
minDistance={0.001}
/>
<ambientLight intensity={0.5} />
<spotLight position={[10, 15, 10]} angle={0.3} />
<Cube />
</>
)
}
const CompleteScene = () => {
return (
<div id={styles.scene}>
<Canvas
camera={{ position: [0, 0, 0] }}
orthographic={true}
>
<SceneItems />
</Canvas>
</div>
)
}
I figured I could reduce the minDistance on the OrbitalControls but to no effect. What am I missing?
Not sure if this counts as a complete answer, but for whatever reason when I remove the camera property in <Canvas> I am finally able to get the result that I want. I think since <Canvas/> provides a perspectiveCamera by default and I added the props there, it overrode my added orbitalControls.
Related
I am using React Leaflet to create a custom map.
The card (Image Overlay) is currently being rendered, but it does not fill the container in which the card is placed.
The size of the container is set strictly and I would like the map to fill the container as much as possible. All attempts to resize with CSS failed.
Live example: https://codesandbox.io/s/dark-worker-8qbzfr
My code:
import "./styles.css";
import { MapContainer, ImageOverlay } from "react-leaflet";
import "leaflet/dist/leaflet.css";
const M = ({ width, height, zoom, center }) => {
const wh = [width, 500];
const origin = [0, 0];
const bounds = [origin, wh];
return (
<div style={{ width: "1100px", height: "600px" }}>
<MapContainer
style={{ height: "100%", minHeight: "100%" }}
bounds={zoom ? undefined : bounds}
boundsOptions={{
padding: [0, 0]
}}
maxBounds={bounds}
zoom={center ? zoom : undefined}
center={zoom ? center : undefined}
>
<ImageOverlay
url="../ptichnikDraw.png"
bounds={bounds}
className="map_main"
/>
</MapContainer>
</div>
);
};
const App = () => {
return (
<div
style={{
display: "flex",
justifyContent: "center"
}}
>
<M width={1500} height={500} center={[0, 0]} />
</div>
);
};
export default App;
You want your "card" (the <ImageOverlay>) to fill the initial map container/viewport.
You will not be able to do so using (only) CSS, but with Leaflet map options and methods, which are exposed by React Leaflet wrapper:
Use the Leaflet map whenReady option (exposed as a prop of <MapContainer>) to attach a callback that is executed once the map is initialized
Runs the given function fn when the map gets initialized
While not explicitly documented, that callback receives a load event argument, which target property is the newly instantiated Leaflet map
Fired when the map is initialized
Call the fitBounds() map method on that instance, with the same bounds as your Image Overlay, to have the map view be adjusted accordingly
Sets a map view that contains the given geographical bounds with the maximum zoom level possible.
Important: make sure to set the map zoomSnap option to value 0, otherwise the fitBounds will be modified so that the final zoom is a multiple of zoomSnap (default to 1, i.e. integer zoom levels)
Forces the map's zoom level to always be a multiple of this, particularly right after a fitBounds() or a pinch-zoom. By default, the zoom level snaps to the nearest integer; lower values (e.g. 0.5 or 0.1) allow for greater granularity. A value of 0 means the zoom level will not be snapped after fitBounds or a pinch-zoom.
const M = ({ width, height, zoom, center }) => {
const wh = [width, 500];
const origin = [0, 0];
const bounds = [origin, wh];
return (
<div style={{ width: "1100px", height: "600px" }}>
<MapContainer
style={{ height: "100%", minHeight: "100%" }}
bounds={zoom ? undefined : bounds}
boundsOptions={{
padding: [0, 0]
}}
maxBounds={bounds}
zoom={center ? zoom : undefined}
center={zoom ? center : undefined}
zoomSnap={0} // Important to disable snap after fitBounds
whenReady={(e) => e.target.fitBounds(bounds)} // Have the map adjust its view to the same bounds as the Image Overlay
>
<ImageOverlay
url="../ptichnikDraw.png"
bounds={bounds}
className="map_main"
/>
</MapContainer>
</div>
);
};
Updated CodeSandbox: https://codesandbox.io/s/pedantic-tree-lz1o9q
Using the default Leaflet JavaScript library you can use map.invalidateSize(). Don't know how that would work in React but maybe you can figure that one out using the documentation.
I'm using https://www.npmjs.com/package/react-jsx-highstock library for plotting the data. I want to know the width of the plotbands dynamically, when I checked the Highcharts there are events redraw and load by which we can find the width of plotbands (http://jsfiddle.net/hfrntt/fdTEx/4661/). Now I want to know how this works in react-jsx-highstock library. As this library provides react components do not know where to add these events.
import { Chart, HighchartsStockChart, PlotBand, Series, useChart, XAxis, YAxis } from 'react-jsx-highstock'
<HighchartsStockChart plotOptions={plotOptions}>
<Chart {...chartOptions} />
<GenericOptions {...genericOptions} />
<XAxis {...xAxis}>
{(dayBands || []).map((plotBand) => (
<PlotBand key={`{plotBand.label?.text}`} {...plotBand} />
))}
</XAxis>
<YAxis {...yAxis}>
{(seriesData || []).map((series, index) => (
<Series key={index} id={index} {...series} />
))}
</YAxis>
</HighchartsStockChart>
I encourage you to use the highcharts-react-official wrapper which is fully supported.
https://github.com/highcharts/highcharts-react
https://www.npmjs.com/package/highcharts-react-official
And later, please reproduce your issue on the online editor with the sample data, you can start from this demo: https://codesandbox.io/s/highcharts-react-demo-gnev1?file=/demo.jsx
I am facing a little problem, I wish I can get some help here!
I have a Picto Icon like this :
const PictoIcon = ({ color, size }) => (
<StyledSvg xmlns="http://www.w3.org/2000/svg" size={size} viewBox="0 0 24 24">
<Path fill={color} d="M12,2L4.5,20.3L5.2,21l6.8-3l6.8,3l0.7-0.7L12,2z" transform="rotate(45)" />
</StyledSvg>
);
The Picto is inside a Map Marker : ( this won't help in my example, thje code above has to be enough )
<Marker
style={isAndroid ? rotation : {}}
tracksViewChanges={showPicto}
key={id}
onPress={handleOnClickMark(marker)}
coordinate={coordinate}
identifier={id}
>
{showPicto && <View style={{backgroundColor: 'red'}}><PictoIcon size={30} color={color}/></View>}
{!showPicto && (isPoint ? <PointWrapper /> : <MarkerIcon size={50} color={color} />)}
</Marker>
I need my marker to be rotated based on the cap variable, but it is not doing good in IOS, so I want that in IOS I rotate the SVG .. But the rotation is based on the starting point of the icon, not its center
Why I am having a problem ? it because my View is a square ( I see that because the backgroudnColor I set there ), and when my svg is rotated by 90 degree for example, it comes off the view, and I don't know why part of it start disappering ( looks like overflow hidden effect in css )
Any help would be mucch appreciated.
The SVG-rotate transformation takes three arguments, of which the last two signify the center of rotation. If omitted, the origin is assumed. See here.
So you need to provide the center-coordinates of your svg as those.
To get the center of any given svg you can use the getBBox-method, to get x, y, width and height of it. With that information you can calculate those two points, for example like so:
const [xP, yP] = [Math.trunc(x + width * 0.5), Math.trunc(y + height * 0.5)];
Edit: I'm not sure if react native supports getBBox!
I'm using Recharts to try to accomplish a doughnut chart with rounded segments, which should end by looking more or less like this:
This is the closest I can achieve, but as you can see I'm running into some problems:
First, the first segment is overlapping the others at both edges. I don't know how to correct that despite my searches.
Next, I'm struggling with aligning the legend properly. I found no way to define a width to svg text so long text would go to the next line. (These texts are contained into variables and not hardcoded)
This is my chart.js. I cropped some parts to make it simpler, but I'll post the whole thing if needed.
const renderLabelContent = (props) => {
const { value, title, x, y, midAngle } = props;
return (
<g transform={`translate(${x}, ${y})`} textAnchor={'start'}>
<text x={(midAngle < -90 || midAngle >= 90) ? (0 - (title.length * 3)) : 0} y={0}
{`${title}`}
</text>
<text x={(midAngle < -90 || midAngle >= 90) ? (0 - (title.length * 3)) : 0} y={20}>
{`${value}`}€
</text>
</g>
);
};
...
export default class Chart extends Component {
...
render() {
return (
<div className="pie-charts">
<div className="pie-chart-wrapper">
<PieChart width={400} height={400}>
<Pie
stroke="none"
legendType="circle"
data={this.state.data}
dataKey="value"
startAngle={180}
endAngle={-180}
cornerRadius={100}
innerRadius={60}
outerRadius={80}
label={renderLabelContent}
paddingAngle={-10}
labelLine={false}
isAnimationActive={true}
>
{
data.map((entry, index) => (
<Cell key={`slice-${index}`} fill={entry.color} />
))
}
<Label width={50} position="center">
2,87€
</Label>
</Pie>
</PieChart>
</div>
</div>
);
}
}
I think there are a couple of ways to approach the Labels issue, in recharts you can place a React component on the Label content prop, and this could be the way for you to inject your own custom Text component that has a max-width and wrap, for example:
<Label content={<Text warp style={{maxWidth:"50px"}}>long string </Text> } />
One more option is to play with the offset property of the label, but it is flexible and will impact the overall Label position, for example:
<Label value="Pages of my website" offset={0} position="center" />
I'm using a component react-stl-obj-viewer to render a 3d stl image. I can render the 3d stl image correctly. Once the image is rendered, I'm trying to move it around and have a button to take a screenshot of it.
<div>
<STLViewer
onSceneRendered={(element) => {
console.log(element);
}}
sceneClassName="test-scene"
file={this.state.selectedFile}
modelColor="#073FE9"
/>
</div>
<div style={{ display: "inline-block" }}>
<Button
id="thumbnail"
style={{ zIndex: "-1", margin: "20px 0px 20px 0px" }}
onClick={(e) => {
this.save3dRender(e, webGlContextExists);
}}
>
Save Frame as Thumbnail
</Button>
{!this.state.showThumbnail ? (
<Container>
<h2>Did you get this image</h2>
<Image src={this.state.thumbnailFile} />
</Container>
) : null}
</div>
In order to take a screenshot of the image, I was trying to use .toDataURL("image/png"). My button does this when pressed.
save3dRender = (e, geeL) => {
e.preventDefault();
var testThumbnail = geeL.canvas.toDataURL("image/png");
this.state.thumbnailFile = testThumbnail;
this.state.thumbnailFileRender = true;
this.state.showThumbnail = false;
};
I am somewhat new at this but thought I was on the right track. Since the STLViewer component is creating the canvas, I was trying to access it this way with .canvas. Not sure if that is correct but I do get a data:image/png;base64 address. However it is a blank image.
Am I accessing the correct canvas? Is there something I need to do to the image after getting it as data:/image/png;base64.
Fixed the issue. It was an array that I needed to reference.
var testThumbnail = geeL[0].toDataURL("image/png");
instead of
var testThumbnail = geeL.canvas.toDataURL("image/png");