Set Konva transform controls to the top of the canvas - javascript

I'm trying to transform an image that sits behind another layer holding a png ( the template ). I want to transform the image below this layer but keep it where it is so the above layer stays as the template.
Is it possible to show the transform controls at the top above everything?
<Stage width={480} height={620} onMouseDown={this.handleStageMouseDown}>
{this.props.file ? (
<Layer>
<Uploaded file={this.props.file} />
<TransformerComponent
selectedShapeName={this.state.selectedShapeName}
/>
</Layer>
) : null}
<Layer listening={false}>
<Overlay />
</Layer>
</Stage>

You need to change the structure of your nodes. Just show transformer on top of all other shapes. If you need to disable events for overlayer, you can use listening={false}.
<Stage width={480} height={620} onMouseDown={this.handleStageMouseDown}>
<Layer>
{this.props.file &&
<Uploaded file={this.props.file} />
}
{/* use listening={false} for image in overlay */}
<Overlay/>
<TransformerComponent
selectedShapeName={this.state.selectedShapeName}
/>
</Stage>

If anyone's looking for a solution using hooks, I found that if you have a ref for the Transformer, you can easily call the zIndex() method with an arbitrarily high number when your shape is selected, then redraw it to be safe (it might work without this part)
useEffect(() => {
if (isSelected) {
trRef.current.zIndex(10000);
trRef.current.getLayer().batchDraw();
}
}, [isSelected]);
This seems to render the Transformer above everything else on the canvas, even if the shape itself is obscured.

Related

React leaflet bouncing marker

I have a react leaflet map that is more or less built as a component as below:
<>
<MapContainer
center={[startLat, startLen]}
more props...
>
<TileLayer
url={`...`}
attribution='...'
/>
{data?.length > 0 &&
data.map((item) => {
return (
<Marker
key={item.name}
position={[item.lat, item.lang]}
more props...
>
</Marker>
);
})}
</MapContainer>
</>
I would like some of the markers to be animated. Doesn't really matter how, they just need to stand out. I found a leaflet plugin that looks very useful: https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing
But to be honest I don't know how to apply it to this Marker React component. Is it possible? Or is there another easy way of making one marker on the map move/stand out?

ThreeJS update shadow for buffergeometry

I have a model .gltf loaded in ThreeJS with a keyframe animation that change the shape of the object ( it's a point level animation ). It's working fine, but the shadow doesn't change!
I played around with geometry.computeVertexNormals(), but when I apply that, my model turns total black.
Can someone help me with this one?
Thanks,
Simone
There should be no reason to call BufferGeometry.computeVertexNormals(). You can enable shadow casting by doing this:
gltf.scene.traverse( function ( object ) {
if ( object.isMesh ) {
object.castShadow = true;
}
}
If the model should also receive shadows, set the property receiveShadows to true, too.
You also need to enable shadows on the renderer, properly configure the shadow camera of your light and ensure that the floor has a material that can receive shadows (e.g. not MeshBasicMaterial). An example like the following might be a good orientation:
https://threejs.org/examples/webgl_animation_skinning_blending

Unable to animate React-Konva Circle using React-Motion

I am using React-Konva to draw shapes in my app. I have drawn a circle inside another circle and grouped them. Now, what I want to do is that on a button click the circles should animate (move horizontally). Here is my related code:
<Layer>
<Motion style={{a: spring(open ? 400 : x)}}>
{({a}) => {
return(
<div
style={{
WebkitTransform: `translate3d(${a}px, 0, 0)`,
transform: `translate3d(${a}px, 0, 0)`,
}}
>
<Group draggable={true}>
<CircleComponent
x={parseInt(x)}
y={parseInt(y)}
radius={parseInt(radius)}
color={color}
shadowValue={parseInt(shadowValue)}
/>
<CircleComponent
x={parseInt(x)}
y={parseInt(y)}
radius={parseInt(innerRadius)}
color={innerColor}
/>
</Group>
</div>
);}
}
</Motion>
</Layer>
Right now I am getting this error: 'Cannot read property '_idCounter' of undefined'. And this is because I'm introducing a div container inside Layer tag. But if I remove the div container and apply the transform styling to the Group tag, nothing happens. I have read the docs and the Group class doesn't accept any style props. Is there any workaround?
You can't add div as a child of Layer because layer can have only Konva.Group or Konva.Shape as children (not DOM elements).
Group don't style property, but you can use offsetX and offsetY to achieve our effect. Something like:
<Group draggable={true} offsetX={a}>

react how to make SVG container component to manage drawings in low level components

I start learning React to make visualization application with a large amount of data. Also, this is very first time to create a web-based application. Previously, I also don't have much experience in html, css, javascript, etc.
So far, I could be able to draw something in the following way:
...
<svg width={600} height={600}>
<AnyChart data={data} ... />
<AxisX ... />
<AxisY ... />
</svg>
Here, I want to make a React component called ChartContainer that will create a svg with given width and height. I want to use the ChartContainer component to manage information that can be shared among AnyChart, AxisX and AxisY components in the future. Then, any drawing will go into the svg. Thus, the code may look like this:
...
<ChartContainer width={600} height={600}>
<AnyChart data={data} ... />
<AxisX ... />
<AxisY ... />
</ChartContainer>
...
And, ChartContainer contains only render function as following:
render() {
return (
<svg width={600} height={600}></svg>
);
}
Of course, it didn't show me the correct result. In fact, it didn't draw anything. Can anyone help me to solve this issue? Or any reference or tutorial? I searched but so far couldn't find any simple example.
Thanks.

How to plot circles on path using React D3 for tooltip for large dataset fast

Chart loads fine without tooltip. Calling tooltip (plotting circle over path - about 24000 points) component totally slows. Spinner hangs for about 12 seconds before rendering. Following is the loop that is inside render that slows. Any ideas on how to render this component later ( in background) after rendering line chart first.
Could there be a different approach for solving this problem ?
tooltip = data.points.map((series, id) => {
return series.map((d,i) =>{
return (
<circle
r={this.state.radius}
cx={cx(d)}
cy={cy(d)}
>
<cover
x={tex}
y={fab}
/>
</circle>
);
})
I have found the solution in this enter link description here
Using D3 with Canvas for plotting large graph is the way to go. I was using SVG to render the graph as well.

Categories

Resources