如何使用 paper.js 创建颜色选择器？

问题描述

我一直在尝试为我的绘图应用程序创建一个颜色选择器，用于更改 paper.js 中的画笔颜色，但我有点迷茫。我使用了一个脚本从 paper.js 库示例中创建了 3 个 HSL 轮子，并通过单击左上角的圆圈来激活它们。到目前为止它看起来像这样：HSLwheels。有谁知道如何从这些轮子中读取颜色值，或以任何其他方式使用 paperscript 创建颜色选择器？

var viewColorWheel = 'true';

function showWheel() {
    var steps = {
        hue: 100,saturation: 20,lightness: 3
    };
    for (var i = 0; i < steps.lightness; i++) {
        var radius = view.size.width / steps.lightness * 0.45;
        var offset = new Point(view.size.width / steps.lightness,0);
        var position = view.bounds.leftCenter + offset * (i + 0.5);
        var lightness = 1 - (i + 1) / (steps.lightness + 1);
        createWheel(position,radius,steps,lightness);
    };
}

function createWheel(center,lightness) {
    
    var hUnit = 360 / steps.hue;
    for (var h = 0; h < steps.hue; h++) {
        var hue = h * hUnit;
        var vector = new Point({
            angle: hue - 90,length: radius
        });
        pathC = new Path(new Point(),vector.rotate(hUnit / 2));
        pathC.closed = true;
        pathC.arcTo(vector,vector.rotate(hUnit / -2));
        pathC.position += center;
        var colors = [];
        for (var i = 0; i < steps.saturation; i++) {
            var saturation = i / steps.saturation;
            var color = { hue: hue,saturation: saturation,lightness: lightness };
            colors.push(color);
        }
        var gradient = new Gradient(colors,true);
        var from = center;
        var to = center + vector;
        var gradientColor = new Color(gradient,from,to);
        pathC.fillColor = pathC.strokeColor = gradientColor;
    }
}

var strokeColorButton = new Path.Circle({
    center: [40,80],radius: 15,fillColor: strokeColor
});

strokeColorButton.onClick = function(event) {
    //strokeColorButton.radius = 40;
    console.log(viewColorWheel);
    if (viewColorWheel == 'true') {
        console.log(viewColorWheel);
        showWheel();
       viewColorWheel = 'false';
        //colorWheelLayer.activate()
    } else {
        viewColorWheel = 'true';
    }
}

解决方法

我是 paper.js 的新手，正在通过 StackOverflow 和教程学习。我正在挣扎，而不是在发展。 :D 我创建了一个简单的颜色选择器工具。我不确定这是否是您正在寻找的内容，希望它会有所帮助。

var paintColor = "red";

    const changeColor = (color) => {
        paintColor = color;
    }    
    paper.install(window);
    window.onload = function () {
        paper.setup('drawCanvas');

        var tool = new Tool();
        var path;

        tool.onMouseDown = function (event,strokeColor = paintColor) {
            path = new Path({
                center: event.path,strokeColor: strokeColor,strokeSize: 2
            });
            // path.add(event.point);
        }

        tool.onMouseDrag = function (event) {
            path.add(event.point);
        }
    }
  
    function clearCanvas() {
        paper.project.activeLayer.removeChildren();
        paper.view.draw();
    }

    html,body{
    height: 100%;
    }
    body{
    font: 20px sans-serif;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center;
    /* flex-direction: column; */
    }
    canvas [resize]{
    flex: 1;
    border: 4px solid rgb(75,75,75);
    width: 100%;
    }  
    .tools {
    width:200px;
    height:50px;        
    top:1%;
    left: 40%;
    position: fixed;
    align-items:center;
    background:#ddd;
    padding:10px 10px;
    text-align: center; 
    border-radius: 10px;
    display: flex;
    justify-content: center;       
    }

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Color Picker with PaperJs</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>


</head>

<body>
    <div class="tools">
        <div class="color">
            <label for="pen-color">Color</label>
            <input type="color" id="pen-color" value="#000" onclick="changeColor(this.value);">
        </div>    

        <div class="clear">
            <label>Clear Canvas</label>
            <button onclick="clearCanvas()">
                Clear
            </button>
        </div>
    </div>

<canvas id="drawCanvas" resize></canvas>

</body>

</html>

color-picker javascript paperjs