Hi I am new to react konva and trying to make a custom shape for my project
I wanted to create the yellow element which is basically a trapezium with curved sides and should fit inside the red ring as shown in the image. Any help is much appreciated.
You can use Konva.Ring and Konva.Arc shapes for that.
import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Arc, Ring } from "react-konva";
const App = () => {
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Ring
x={200}
y={200}
innerRadius={40}
outerRadius={70}
fill="red"
stroke="black"
/>
<Arc
x={200}
y={200}
innerRadius={40}
outerRadius={70}
angle={60}
rotation={-120}
fill="yellow"
stroke="black"
/>
</Layer>
</Stage>
);
};
https://codesandbox.io/s/react-konva-arc-demo-yhkoh
Related
I'm new to react-three-fiber, so I really think my problem is easy but I almost give up on it 😅.
the problem :
I have a 3D model it renders ok but it’s away too big
I have to zoom out to 25% just to see almost half the model (see the picture)
what I wanted:
the model to be way smaller so I can put it as a small background for my website.
Here’s the full model
I want to put the model.js but it’s too many lines 😅, there’s nothing special really I use the gltfjsx command line to transfer my .gltf file to .js file and I didn’t do any changes to it.
and here's my app.js
import React, { Suspense } from "react";
import { Canvas } from "#react-three/fiber";
import { OrbitControls } from "#react-three/drei";
import './App.css';
import Model from './components/Bedroom';
function App() {
return (
<Canvas>
<OrbitControls />
<ambientLight intensity={0.6} />
<directionalLight intensity={0.5} />
<Suspense fallback={null}>
<Model/>
</Suspense>
</Canvas>
);
}
export default App;
use Stage from 'three/drei' to stage your model it will fix this issue,
example:
<Canvas>
<Stage preset="rembrandt" intensity={1} environment="city">
<Model/>
...
<Stage/>
<Canvas/>
Or:
control your zoom inside camera of canvas like this
<Canvas camera={{ fov: 35, zoom: 1.3, near: 1, far: 1000 }}>
...
<Canvas/>
Myabe you are just trying to scale your model, in that case you just need to add scale={[sclaefactorx,scalefactory,sclaefactorz]} on your model like so :
import { Canvas } from "#react-three/fiber";
import { OrbitControls } from "#react-three/drei";
import './App.css';
import Model from './components/Bedroom';
function App() {
return (
<Canvas>
<OrbitControls />
<ambientLight intensity={0.6} />
<directionalLight intensity={0.5} />
<Suspense fallback={null}>
<Model scale={[0.1,0.1,0.1]}/>
</Suspense>
</Canvas>
);
}
export default App;
Since in the model file created from gltfjsx there should be a {...props} on the created group the scale will be applied directly to the mesh group
i'm trying to create 2 layers (Images) that cannot overlap,
So they can still dragged freely, but won't showed over each other.
I've tried using zIndex or a blank Rect, but can't figure out how to make 2 draggable layers that can't overlap (Very similar to overflow: hidden behavior)
a GIF is attached to show the problem, each layer shouldn't be visible behind the divider line.
return (
<Stage width={size.width} height={size.height}>
{stateImages.map((imageConfig) => {
index++
return <Layer><Image
x={size.width/2 * index}
y={0}
image={imageConfig.image}
draggable
/>
</Layer>
})}
{stateImages.length > 1 &&
<Layer>
<Rect
x={size.width / 2}
y={0}
width={4}
height={size.height}
fill="white"
shadowBlur={10}
zIndex={2}
/>
</Layer>
}
</Stage>
)
You can use clip https://konvajs.org/docs/clipping/Clipping_Regions.html#page-title for that use case:
import React, { Component } from "react";
import { render } from "react-dom";
import { Stage, Layer, Image, Group } from "react-konva";
import useImage from "use-image";
// the first very simple and recommended way:
const MyImage = () => {
const [image] = useImage("https://i.imgur.com/ktWThtZ.png");
return <Image image={image} draggable />;
};
class App extends Component {
render() {
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Group
clipX={0}
clipY={0}
clipWidth={window.innerWidth / 2}
clipHeight={window.innerHeight}
>
<MyImage />
</Group>
<Group
x={window.innerWidth / 2}
clipX={0}
clipY={0}
clipWidth={window.innerWidth / 2}
clipHeight={window.innerHeight}
>
<MyImage />
</Group>
</Layer>
</Stage>
);
}
}
render(<App />, document.getElementById("root"));
https://codesandbox.io/s/react-konva-clip-images-demo-onp3w?file=/src/index.js
I want to use konva.js node nesting in react app. I need help on how to use it.
Thanks in advance.
I can advise you to use react-konva library
https://github.com/konvajs/react-konva
The examples with the draggable circles:
import React, { Component } from 'react';
import Konva from 'konva';
import { render } from 'react-dom';
import { Stage, Layer, Circle, Text } from 'react-konva';
class App extends Component {
handleDragStart = e => {
e.target.setAttrs({
scaleX: 1.3,
scaleY: 1.3
});
};
handleDragEnd = e => {
e.target.to({
duration: 0.5,
scaleX: 1,
scaleY: 1
});
};
render() {
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Text text="You can drag a circle" />
{[...Array(10)].map(i => (
<Circle
key={i}
x={Math.random() * window.innerWidth}
y={Math.random() * window.innerHeight}
radius={20}
fill="green"
opacity={0.8}
draggable
onDragStart={this.handleDragStart}
onDragEnd={this.handleDragEnd}
/>
))}
</Layer>
</Stage>
);
}
}
render(<App />, document.getElementById('root'));
You need to add react, konva, react-dom and react-konva dependencies
I'm using the following code to create a rectangle in the leaflet map.
const rectangles = [[51.49, -0.08], [51.5, -0.06]]
<Rectangle key={key} bounds={rectangle} color="green">
</Rectangle>
I want to add a text inside the rectangle like a label for the rectangle is there a way to do this?
I'm using react-leaflet library for this.
To write on the map, we can use a DivIcon from the Leaflet library added to a React-Leaflet Marker component.
Create a DivIcon with HTML
A DivIcon is an icon that can contain HTML instead of an image. We'll import the Leaflet library and create a DivIcon with our desired text.
import L from 'leaflet';
const text = L.divIcon({html: 'Your HTML text here'});
Add the DivIcon to a Marker
With the DivIcon created, we'll add it to a Marker placed in the center of a Polygon.
import React from 'react';
import L from 'leaflet';
import { Marker, Polygon } from 'react-leaflet';
const PolygonWithText = props => {
const center = L.polygon(props.coord).getBounds().getCenter();
const text = L.divIcon({html: props.text});
return(
<Polygon color="blue" positions={props.coords}>
<Marker position={center} icon={text} />
</Polygon>
);
}
export default PolygonWithText
Add the Marker to the Map
Finally, we add the Polygon, Marker, and DivIcon to a Map.
import React, { Component } from 'react';
import {Map, TileLayer} from 'react-leaflet';
import PolygonWithText from './PolygonWithText';
class MyMap extends Component {
render () {
return (
<Map center={[20.75, -156.45]} zoom={13}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<PolygonWithText text="MyText" coords={[...]} />
</Map>
}
}
export default MyMap;
refer the below code, this one uses a rectangle with a tooltip inside it
{zoneLabel}
<Rectangle key={key} bounds={coordinates}>
</Rectangle>
I am trying to implement d3.js in react native, but i am facing issue Cannot read property 'querySelectorAll' of undefined.
In below code i am trying to change the color and size of circle buy using on-press function over button
Plugin used
npm install d3#v3.5.17
npm install react-native-svg --save
Code:
import React, { Component } from 'react'
import { ScrollView, Button } from 'react-native'
import { connect } from 'react-redux'
import Svg,{Circle, Path, Rect, Symbol, Text, Use, Defs, Stop} from 'react-native-svg';
import * as d3 from "d3";
class SVGexample extends Component {
constructor (props) {
super(props)
this.state = {}
}
renderCricles() {
var circle = d3.selectAll("Circle"); //Select all circles
circle.style("fill", "steelblue"); //fill circles with color steelblue
circle.attr("r", 60); //Change the radius of circle
}
render () {
return (
<ScrollView style={styles.container}>
<Svg
height="500"
width="500"
>
<Circle
cx="50"
cy="50"
r="45"
stroke="blue"
strokeWidth="2.5"
fill="green"
/>
<Circle
cx="150"
cy="150"
r="45"
stroke="blue"
strokeWidth="2.5"
fill="green"
/>
<Circle
cx="250"
cy="250"
r="45"
stroke="blue"
strokeWidth="2.5"
fill="green"
/>
<Rect
x="15"
y="15"
width="70"
height="70"
stroke="red"
strokeWidth="2"
fill="yellow"
/>
</Svg>
<Button
onPress={this.renderCricles.bind(this)}
title="Bind D3"
color="#32A1FE"
style={{height: 50}}
/>
</ScrollView>
)
}
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SVGexample)
`