javafx自制双头滑轨组件

原创已于 2022-10-24 22:33:28 修改 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #开发语言 #1024程序员节

于 2022-08-15 22:45:54 首次发布

javafx 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种方法，通过扩展JavaFX的原生组件，创建了一个双头滑块，允许用户选择一个数值范围。作者在找不到现成的双头滑块组件后，决定自行开发。代码中详细展示了如何监听滑动事件并更新数值范围，以及如何确保滑块始终在有效范围内移动。

javafx的原生组件里面的slider只有一个头，滑动获得一个数值，而我想要一个双头slider，滑动获得一个取值范围，看了一圈没有现成的，于是自己动手做了一个

class TwoHeadSlider(private val minValue:Double, private var startValue:Double, private var endValue:Double, maxValue:Double, private var sliderWidth:Double=100.0):Region() {
    private var range = maxValue-minValue
    private var pane:Pane = Pane().apply { prefHeight=30.0 }
    private var valueList:MutableList<Double> = mutableListOf(startValue,endValue)
    private var valueFactory = 0.0
    val startValueProperty = SimpleDoubleProperty(0.0)
    val endValueProperty = SimpleDoubleProperty(0.0)
    init {
        valueFactory=String.format("%.2f",(range/sliderWidth)).toDouble()
        setListenerValue()
        children.addAll(pane)
        drawSlider()
    }
     private fun drawSlider(){
//        computeData()
        val line = Line(0.0, 15.0, sliderWidth, 15.0)
        val start = Rectangle(0.0, 0.0, 10.0, 30.0).apply {
//            translateX=BigDecimal((startValue-minValue).toString()).divide(BigDecimal(valueFactory.toString())).toDouble()
            translateX = String.format("%.0f",(startValue-minValue)/valueFactory).toDouble()
            var oldNodeX = 0.0
            var oldMoveX=0.0
            setOnMousePressed {
                oldNodeX = it.sceneX
                oldMoveX=translateX
            }
            setOnMouseDragged {
                val moveX = it.sceneX - oldNodeX
                if ((moveX+oldMoveX in 0.0..sliderWidth)||(translateX==sliderWidth&&moveX<0)||(translateX==0.0&&moveX>0))
                    translateX=moveX+oldMoveX
//                println(this.translateX)
                //这里之所以不用valueFactory是因为用的话valueFactory会有很多位小数，在这儿会算不出来最大值，有一点误差
                valueList[0]=String.format("%.2f",BigDecimal(translateX.toString()).multiply(BigDecimal((range/sliderWidth).toString())).add(BigDecimal(minValue.toString()))).toDouble()
                setListenerValue()
            }
        }
        val end = Rectangle(0.0, 0.0, 10.0, 30.0).apply {
            translateX=String.format("%.0f",(endValue-minValue)/valueFactory).toDouble()
            var oldNodeX = 0.0
            var oldMoveX=0.0
            setOnMousePressed {
                oldNodeX = it.sceneX
                oldMoveX=translateX
            }
            setOnMouseDragged {
                val moveX = it.sceneX - oldNodeX
                if ((moveX+oldMoveX in 0.0..sliderWidth)||(translateX==sliderWidth&&moveX<0)||(translateX==0.0&&moveX>0))
                    translateX=moveX+oldMoveX
//                println(this.translateX)
//                valueList[1]=BigDecimal(translateX.toString()).multiply(BigDecimal(valueFactory.toString())).add(BigDecimal(minValue.toString())).toDouble()
                valueList[1]=String.format("%.2f",BigDecimal(translateX.toString()).multiply(BigDecimal((range/sliderWidth).toString())).add(BigDecimal(minValue.toString()))).toDouble()
                setListenerValue()
            }
        }
        pane.children.addAll(line,start,end)
    }
    private fun setListenerValue(){
        val list = mutableListOf<Double>().apply {
            for (s in valueList )
                add(s)
        }
        list.sort()
        startValueProperty.value=list[0]
        endValueProperty.value=list[1]
    }

    fun gainStartValue():Double{
        return startValueProperty.value
    }
    fun gainEndValue():Double{
        return endValueProperty.value
    }
}

效果：