Question

我有这个功能，但是我无法获得拖动滑块的路径应该改变圆圈的背景颜色......

       $(document).ready(function () {
        $("#circle").append('<canvas id="slideColorTracker" class="slideColor"></canvas>');
        var canvas = document.getElementById("slideColorTracker");
        var context = canvas.getContext('2d');
        var $circle = $("#circle"),
        $handler = $("#handler"),
        $p = $("#test").val(),
        handlerW2 = $handler.width() / 2,
        radius = ($circle.width()/2)+10,
        offset = $circle.offset(),
        elementPos = { x: offset.left, y: offset.top },
        mHold = 0,
        PI = Math.PI / 180
        $handler.mousedown(function () {
            mHold = 1;             
            var dim = $("#slideColorTracker");
            if ($(".slideColor").length > 1) {
                $("#slideColorTracker").remove();
            }
        });

        $(document).mousemove(function (e){
            move(e);
        }).mouseup(function () { mHold = 0 });

        function move(e) {
            if (mHold) {
                debugger
                var deg = 180;
                var startAngle = 4.72;
                var mousePos = { x: e.pageX - elementPos.x, y: e.pageY - elementPos.y }
                var atan = Math.atan2(mousePos.x - radius, mousePos.y - radius);
                var deg = -atan / PI + 180;                   
                var percentage = (deg * 100 / 360) | 0;
                var endAngle = percentage;
                var X = Math.round(radius * Math.sin(deg * PI)),
                Y = Math.round(radius * -Math.cos(deg * PI));
                var cw = X + radius - handlerW2 - 10; //context.canvas.width /2;
                var ch = Y + radius - handlerW2 - 10;
                $handler.css({
                    left: X + radius - handlerW2 - 10,
                    top: Y + radius - handlerW2 - 10,
                })
                context.beginPath();
                context.arc(($circle.width() / 2), ($circle.height() / 2), radius+20, startAngle, endAngle, false);
                context.lineWidth = 15;
                context.strokeStyle = 'black';
                context.stroke();
                $("#test").val(percentage);
                $circle.css({ borderColor: "hsl(200,70%," + (percentage * 70 / 100 + 30) + "%)" });
            }
        }
    });

我不想使用任何插件！任何帮助将不胜感激，因为我是jquery的新手！

Answer 1

除非我将其更改为此内容，否则$handler不会为我拖动：

$handler.css({
    left: mousePos.x,
    top: mousePos.y,
    position:'absolute'
})

当拖动传递$cirlce.width / 2时，它会正确地描边。

在圆形范围滑块中，如何更改已更改路径的背景颜色？

1 个答案: