我正在使用 react-native
ART
库在我的移动应用程序中绘制可扩展的矢量元素,ART
是完美的库,因为它可以使用自己的工具轻松制作动画和变形。但是 ART
没有像 SVG 的 Circle
、Rect
eclipse 刻这样的自定义元素...,ART 只有一种类型,称为 Shape
并且功能强大,足以创建几乎任何形状。但我在使用 Shape
绘制可扩展的圆 Angular 矩形时遇到了困难。
import React from 'react'
import PropTypes from 'prop-types'
import {ART} from 'react-native'
const {Group, Shape} = ART
export default class Graphics extends React.Component{
render(){
const {x, y, width, height, fill, stroke} = this.props;
const d = `M0,0L${width},0L${width},${height}L0,${height}L0,0z`
return(
<Group x={x} y={y}>
<Path d={d} fill={fill} stroke={stroke}>
</Group>
)
}
}
如您所见,我创建了具有给定宽度和高度的矩形形状,但我不知道如何生成圆 Angular 。
我不知道 d3 是否可以使用 d3 来做到这一点?
最佳答案
您可以使用 ART
Path
对象来创建路径以及路径 curve
或 curveTo
方法或 arc
arcTo
方法。请检查下面的示例 Rect
组件。
import React from 'react'
import PropTypes from 'prop-types'
import {ART} from 'react-native'
const {Group, Shape, Path} = ART
function Rect({fill, stroke, x, width, y, rc, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius, ...rest}){
const startX = 0;
const startY = 0;
const smallDimension = width > height ? height : width;
let tlr = topLeftRadius !== null ? topLeftRadius : rc; tlr = tlr > smallDimension/2 ? smallDimension /2 : tlr;
let trr = topRightRadius !== null ? topRightRadius : rc; trr = trr > smallDimension/2 ? smallDimension /2 : trr;
let brr = bottomRightRadius !== null ? bottomRightRadius : rc; brr = brr > smallDimension/2 ? smallDimension /2 : brr;
let blr = bottomLeftRadius !== null ? bottomLeftRadius : rc; blr = blr > smallDimension/2 ? smallDimension /2 : blr;
const d = Path()
.move(startX, startY)
.move(startX, tlr)
.arc( tlr, startY-tlr, tlr, tlr, false, false) // top left
.lineTo(width - trr, startY)
.arc( trr, startX+trr, trr, trr, false, false) // top right
.lineTo(width, startY+ (height - brr))
.arc(startX-brr, brr, brr, brr, false, false) // bottom right
.lineTo(startX + blr, height)
.arc(startX-blr, startY-blr, blr, blr, false, false) // bottom right
.close()
return(
<Group x={x} y={y}>
<Shape {...rest} fill={fill} stroke={stroke} d={d}/>
</Group>
)
}
Rect.propTypes = {
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
x: PropTypes.number,
y: PropTypes.number,
fill: PropTypes.string,
stroke: PropTypes.string,
topLeftRadius: PropTypes.number,
topRightRadius: PropTypes.number,
bottomRightRadius: PropTypes.number,
bottomLeftRadius: PropTypes.number,
rc: PropTypes.number
}
Rect.defaultProps = {
x: 0,
y: 0,
fill: 'transparent',
stroke: 'red',
topLeftRadius: null,
topRightRadius: null,
bottomRightRadius: null,
bottomLeftRadius: null,
rc: 0
}
export default Rect
这里您拥有完全可扩展的独立圆 Angular 支撑矩形组件。
- Prop
width
和height
- 将是正常的矩形,根本没有圆 Angular 。 - Prop
width
、height
和rc
- 将为您提供所 Angular 相等圆 Angular 。 - Props
width
、height
和topRightRadius
(或任何其他 Angular ) - 将为您提供每个给定的圆 Angular 。
请检查此gist以便完整使用。
关于javascript - 如何在React Native ART中绘制圆 Angular 矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56805838/