Заполните SVG, перетаскивая указатель - PullRequest
Новая
       12

Заполните SVG, перетаскивая указатель

2 голосов
/ 26 марта 2020

enter image description here

Я хочу залить цвет цифрой, показанной на изображении, перетаскивая зеленый кружок на белый контур (он должен заполниться цветом solid сзади, как при перетаскивании) , Я использовал SVG и путь также нарисован в нем. Перетаскиваемый круг также является частью того же SVG. Я открыт, если это можно сделать без SVG в любом случае. Пытался сделать это на холсте, но бросил это, потому что я не мог перетащить туда по заданному пути.

Мой код ниже 

var data = Snap.path.toCubic(document.getElementById("path2").getAttribute('d'))
    dataLength = data.length,
        svgPoints = [],
        pointsString = data.toString();

    for (var i = 0; i < dataLength; i++) {
        var seg = data[i];
        if (seg[0] === "M") {
            var point = {};
            point.x = seg[1];
            point.y = seg[2];
            svgPoints.push(point);
        } else {
            for (var j = 1; j < 6; j += 2) {
                var point = {};
                point.x = seg[j];
                point.y = seg[j + 1];
                svgPoints.push(point);
            }
        }
    }

    TweenMax.set('.knob', { x: svgPoints[0].x, y: svgPoints[0].y })

    var circle = document.querySelector(".knob");
    var path2 = document.querySelector("#path2");

    var insidePath = false;
    var lastPoint = {
        x: 0,
        y: 0
    };

    var draggable = new Draggable(circle, {
        liveSnap: {
            points: svgPoints
        }, 
    });
    body {
        background-color: #222;
        background-color: rgb(145, 140, 140);
        text-align: center;
        overflow: hidden;
    }

    svg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    #DiacoDesignLink,
    #pens {
        color: #fff;
    }
<div id="container">
    <svg id="Layer_1" x="0px" y="0px" width="159.129px" height="220px" viewBox="0 0 159.129 220"
        enable-background="new 0 0 159.129 220" xml:space="preserve">
        <g>
            <g>
                <g>
                    <g>
                        <path id="path1" fill-opacity="0.1" fill="#492015" stroke="#492015" stroke-width="2" d="M53.336,203.653c-1.298,0-3.084-0.039-5.461-0.119c-2.436-0.092-4.921-0.256-7.395-0.49
                        c-2.684-0.266-5.221-0.662-7.548-1.18c-2.998-0.666-5.336-1.623-7.147-2.926l-0.36-0.279c-1.794-1.531-3.288-3.475-4.511-5.83
                        c-1.01-1.92-1.9-4.066-2.642-6.373c-0.721-2.264-1.263-4.492-1.613-6.627c-0.367-2.186-0.554-4.188-0.554-5.945
                        c0-2.816,0.369-5.453,1.099-7.838c0.847-2.793,2.447-5.379,4.756-7.684c1.762-1.918,3.827-4.025,5.917-6.033
                        c2.04-1.969,3.972-3.863,5.738-5.629c2.023-2.174,4.901-5.242,8.487-9.061c3.534-3.768,7.361-8.021,11.374-12.639
                        c4.066-4.686,8.16-9.631,12.166-14.693c4.017-5.078,7.734-10.098,11.048-14.923c3.221-4.68,5.838-9.098,7.779-13.133
                        c1.644-3.399,2.512-6.299,2.512-8.391c0-1.375-0.297-2.325-0.962-3.083c-0.221-0.251-0.635-0.722-2.141-0.722
                        c-1.746,0-3.323,0.636-4.961,2.002c-2.642,2.201-5.342,4.639-8.025,7.248c-2.993,2.908-6.243,5.651-9.661,8.153
                        c-4.309,3.15-9.24,4.747-14.658,4.747c-6.606,0-11.969-2.07-15.938-6.153c-3.917-4.03-5.903-9.309-5.903-15.689
                        c0-7.845,1.773-15.239,5.271-21.979c3.415-6.558,7.982-12.276,13.577-16.998c5.478-4.625,11.74-8.323,18.614-10.99
                        c6.923-2.688,14.141-4.051,21.452-4.051c7.213,0,14.054,0.86,20.332,2.555c6.559,1.773,12.347,4.586,17.204,8.36
                        c4.975,3.873,8.934,8.849,11.769,14.79c2.816,5.913,4.244,13.005,4.244,21.083c0,6.229-1.081,12.806-3.213,19.55
                        c-2.046,6.456-4.772,13.028-8.104,19.534c-3.281,6.397-7.097,12.851-11.34,19.187c-4.183,6.23-8.548,12.273-12.975,17.967
                        c-4.371,5.615-8.796,10.916-13.156,15.758c2.113-0.24,4.252-0.48,6.417-0.719c8.575-0.955,16.974-1.439,24.959-1.439
                        c5.866,0,11.098,1.627,15.549,4.834c3.51,2.535,7.691,7.381,7.691,16.078c0,6.324-2.168,11.586-6.443,15.639
                        c-3.863,3.66-8.569,6.025-13.99,7.029c-4.546,1.066-10.146,2.094-16.107,2.953c-5.981,0.865-12.153,1.623-18.343,2.25
                        c-6.219,0.625-12.399,1.102-18.374,1.422C63.655,203.493,58.127,203.653,53.336,203.653z" />
                    </g>
                </g>
            </g>
        </g>
        <path id="path2" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-miterlimit="10" d="M40.059,71.082
        c0,0,13.449-34.797,52.919-31.959c13.451,0.967,33.333,16,11.667,52.667c0,0-26.563,43.722-48,64.999
        c-4.263,4.23-20.334,22.002,1,24.002c0,0,31.666,3,72.333-11.668" />
        <circle class="knob" r="25" fill="#88CE02" stroke-width="4" stroke="#fff" />
    </svg>
</div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script type="text/javascript" src="./sketch.js"></script>
...