@@ -1,68 +0,0 @@
|
||||
import React from "react"
|
||||
|
||||
interface SliderConfig {
|
||||
label: string
|
||||
value: number
|
||||
description: string
|
||||
onChange: (value: number) => void
|
||||
}
|
||||
|
||||
interface GreenScreenSlidersProps {
|
||||
similarity: number
|
||||
blend: number
|
||||
spill: number
|
||||
onSimilarityChange: (value: number) => void
|
||||
onBlendChange: (value: number) => void
|
||||
onSpillChange: (value: number) => void
|
||||
}
|
||||
|
||||
const SliderRow: React.FC<SliderConfig> = ({ label, value, description, onChange }) => (
|
||||
<div className="green-slider-row">
|
||||
<div className="green-slider-header">
|
||||
<span className="green-slider-label">{label}</span>
|
||||
<span className="green-slider-value">{value}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
className="green-slider"
|
||||
min={0}
|
||||
max={100}
|
||||
value={value}
|
||||
onChange={(e) => onChange(Number(e.target.value))}
|
||||
/>
|
||||
<div className="green-slider-desc">{description}</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export const GreenScreenSliders: React.FC<GreenScreenSlidersProps> = ({
|
||||
similarity,
|
||||
blend,
|
||||
spill,
|
||||
onSimilarityChange,
|
||||
onBlendChange,
|
||||
onSpillChange,
|
||||
}) => {
|
||||
return (
|
||||
<div className="green-section">
|
||||
<div className="green-section-title">参数调节</div>
|
||||
<SliderRow
|
||||
label="相似度"
|
||||
value={similarity}
|
||||
description="越大容忍的色差范围越广"
|
||||
onChange={onSimilarityChange}
|
||||
/>
|
||||
<SliderRow
|
||||
label="边缘平滑"
|
||||
value={blend}
|
||||
description="越大边缘越柔和自然"
|
||||
onChange={onBlendChange}
|
||||
/>
|
||||
<SliderRow
|
||||
label="溢色抑制"
|
||||
value={spill}
|
||||
description="去除边缘颜色溢出"
|
||||
onChange={onSpillChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user