[英]The rendering order of the React-raphael components (like z-index)
I want the Raphael-react components to be drawn in the order I need (to create different layers or something like z-index).我希望按我需要的顺序绘制 Raphael-react 组件(创建不同的层或类似 z-index 的东西)。 How can I control the position of components "Path" on the "Paper"?
如何控制“纸张”上组件“路径”的 position?
This is a simplified view:这是一个简化的视图:
<Paper>
<Set>
<Path .../>
<Path .../>
<Path .../>
</Set>
</Paper>
It seems that Raphael doesn't support z-index, but you can achieve the goal if you keep all data in an array inside local state
(or Redux): Raphael 似乎不支持 z-index,但如果将所有数据保存在
local state
(或 Redux)内的数组中,则可以实现目标:
const [data, setData] = useState([
{ x: 50, y: 50, r: 40, attr: { stroke: "#0b8ac9", "stroke-width": 5 }},
...
])
Then if you'll want change z-Index of element just move it in array:然后,如果您想更改元素的 z-Index,只需将其移动到数组中:
zIndexOrder = [ ..., -1, 0, 1, ...] // last element has big z-index
I prepare demo for you with the Olympic Rings where I just shuffle them.我为您准备了奥运五环的演示,我只是将它们洗牌。
const randomizeZIndex = () => {
const temp = [...data];
temp.sort(() => Math.random() - 0.5);
setData(temp);
};
Of course, random
is useless.当然,
random
是没用的。 You need to maintain a zOrder
on each element to work properly.您需要在每个元素上维护一个
zOrder
才能正常工作。
And if you want work with all figures you can add polymorphism
.如果您想使用所有图形,您可以添加
polymorphism
。 And save the element's type (circle, line, etc.)并保存元素的类型(圆、线等)
const elements = [{
type: "Rect",
key: "FirstRect",
zOrder: 0,
options: {
x:30, y:148, width:240,height:150,
attr:{"fill":"#10a54a","stroke":"#f0c620","stroke-width":5
}
}}, ...];
Code would be like this:代码将是这样的:
import React, {Fragment} from 'react';
import { Raphael, Paper, Set, Rect, Line } from "react-raphael";
const RaphaelElement = {
Line: function line({options}) {
return <Line {...options}/>; // react-raphael Line
},
Rect: function rect({options}) {
return <Rect {...options}/>; // react-raphael Rect
}
}
const AllElements = ({elements}) => {
return (
<Fragment>
{ // with polymorphism
elements.map(({options, key, type}) => {
const CurrRaphaelElement = RaphaelElement[type];
return <CurrRaphaelElement key={key} options={options} />
})
}
</Fragment>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.