尝试编写渐变创建者 javascript 和 jquery

Question

编辑：我终于想出了一个有点不同但可以工作的版本。为将来可能需要的人留下链接：https://jsfiddle.net/qmgob1d5/27/

---

我正在尝试制作一个跨越 16 个框的渐变创建器。 （稍后将通过 POST 为服务器发送哪些颜色值）

我得到了它的工作，在某种程度上，我可以选择第一种和最后一种颜色并制作渐变。但是，我无法弄清楚如何添加更多渐变点。例如：更改任何框的颜色并计算 3..4..5..etc 点之间的梯度值。喜欢这个网站：http://www.colorzilla.com/gradient-editor/

这里是使用代码设置的小提琴：https://jsfiddle.net/qmgob1d5/11/

//Fill the gradient array with gray color.
var PaletteColors = Array.apply(null, Array(16)).map(function () { return {red:128, green:128, blue:128}; });

var ActiveBox = 0;
MakeGradient(); //run gradient maker at start

//Remove marker
$('.ColorPreview').contextmenu(function() {
  $('#' +  $(this).attr('id') ).css('border-bottom','0px');
return false
});

//Add marker and snap sliders to rgb values.
$('.ColorPreview').on('click',function() {

    ActiveBox = $(this).attr('id');
    ActiveBox = Number(ActiveBox.split('_')[1]);
  $('#Color_' + ActiveBox).css('border-bottom','6px solid');

    $('#red').val( PaletteColors[ActiveBox].red );
        $('#green').val( PaletteColors[ActiveBox].green );
        $('#blue').val( PaletteColors[ActiveBox].blue );
});

//Read values from sldier write them to PaletteColors array.
$('.Paletteslider').on('change mousemove',function() {
    var red = ($('#red').val());
    var green = ($('#green').val());
    var blue = ($('#blue').val());

        PaletteColors[ActiveBox].red = Number(red);
        PaletteColors[ActiveBox].green = Number(green);
        PaletteColors[ActiveBox].blue = Number(blue);
    MakeGradient();
});

//Draw gradient based on PaletteColors array.
function MakeGradient() {
var FirstColor = PaletteColors[0];
var SecondColor = PaletteColors[15];
var end = 15;
var Count = 1/end;

        for (i = 0; i <= end; i++ ) {

        var Step = Count * i;
        var CurrentRed = SecondColor.red * Step + FirstColor.red * (1 - Step);
        var CurrentGreen = SecondColor.green * Step + FirstColor.green * (1 - Step);
        var CurrentBlue = SecondColor.blue * Step + FirstColor.blue * (1 - Step);

        PaletteColors[i].red = CurrentRed; PaletteColors[i].green = CurrentGreen; PaletteColors[i].blue = CurrentBlue;

    $('#Color_' + i ).css('background-color','rgb('+ Math.round(CurrentRed) +','+  Math.round(CurrentGreen) + ',' + Math.round(CurrentBlue) +')');
        }
 }

欢迎任何帮助或指导！

Answer 1

您可以通过将跟踪器添加到PaletteColors 数组中的项目（id 和edited 属性），修改makeGradient 的功能，并添加edited 的相应修改来添加您寻求的功能到Paletteslider 事件。

为了添加其他标记，您可以找到一种方法来评估哪些颜色已被修改或者是PaletteColors 中的第一个/最后一个颜色。如果edited 为真或元素是数组中的第一个/最后一个，我选择在条件下过滤数组。从那里，您可以将FirstColor 和SecondColor 的值分别分配给PaletteColors 的第一种和第二种颜色。

要更改FirstColor 和SecondColor 的值：在for 循环内，检查id 是否不是第一个或最后一个元素以及SecondColor id 是否等于i，然后更改FirstColor/SecondColor 的值如果是这样。在为各种元素分配颜色并创建渐变时，您可以检查 i 是否等于 FirstColor 或 SecondColor id 属性。如果是，请使用FirstColor 或SecondColor 渐变的当前颜色以使其显示出来，否则应用您的过渡公式。有关完整的工作示例，请参见下面的代码 sn-p。

//Fill the gradient array with gray color.
var PaletteColors = Array.apply(null, Array(16)).map(function(item, i) {
    return { id: i, color: { red: 128, green: 128, blue: 128 }, edited: false }; });

var ActiveBox = 0;
MakeGradient(); //run gradient maker at start

//Remove marker
$('.ColorPreview').contextmenu(function() {
    $('#' + $(this).attr('id')).css('border-bottom', '0px');
    return false
});

//Add marker and snap sliders to rgb values.
$('.ColorPreview').on('click', function() {
    ActiveBox = Number($(this).data('col'));

    $('#Color_' + ActiveBox).css('border-bottom', '6px solid');

    $('#red').val(PaletteColors[ActiveBox].color.red);
    $('#green').val(PaletteColors[ActiveBox].color.green);
    $('#blue').val(PaletteColors[ActiveBox].color.blue);
    
    var a = PaletteColors.filter(function(col, i) {
        return col.edited || i === 0 || i === 15;
    }).map(function(item, i) {
        item.count = i;
        return item;
    });

});

//Read values from sldier write them to PaletteColors array.
$('.Paletteslider').on('change mousemove', function() {
    var red = Number($('#red').val());
    var green = Number($('#green').val());
    var blue = Number($('#blue').val());
    
    if (!PaletteColors[ActiveBox].edited) {
        PaletteColors[ActiveBox].edited = true;
    }
    PaletteColors[ActiveBox].color.red = red;
    PaletteColors[ActiveBox].color.green = green;
    PaletteColors[ActiveBox].color.blue = blue;
    MakeGradient();
});


//Draw gradient based on PaletteColors array.
function MakeGradient() {
    var colors = PaletteColors.filter(function(col, i) {
        return col.edited || i === 0 || i === 15;
    }).map(function(item, i) {
        item.count = i;
        return item;
    });

    var FirstColor = colors[0];
    var SecondColor = colors[1];
    var end = 15;
    var Count = 1 / end;

    for (i = 0; i <= end; i++) {
        if (colors.length > 2 && i !== 0 && i !== 15 && SecondColor.id === i) {
            FirstColor = SecondColor;
            SecondColor = colors[SecondColor.count + 1];
        }
     

        var Step = Count * i;
        var Current = {};
        var str;
        var match = FirstColor.id === i || SecondColor.id === i ? FirstColor.id === i ? 1 : 2 : false;
        if (match) {
        Current = match === 1 ? FirstColor.color : SecondColor.color;
        } else {
        Current.red = Math.round(SecondColor.color.red * Step + FirstColor.color.red * (1 - Step));
        Current.green = Math.round(SecondColor.color.green * Step + FirstColor.color.green * (1 - Step));
        Current.blue = Math.round(SecondColor.color.blue * Step + FirstColor.color.blue * (1 - Step));
         }
		
        PaletteColors[i].color.red = Current.red > 255 ? 255 : Current.red;
        PaletteColors[i].color.green = Current.green > 255 ? 255 : Current.green;
        PaletteColors[i].color.blue = Current.blue > 255 ? 255 : Current.blue;
        str = 'rgb(' + [Current.red, Current.blue, Current.green].join(',') + ')';
        $('#Color_' + i).css('background-color', str);

    }
}

body, html{
  background: #222222;
	font-family: 'Lato', sans-serif;
	color:white;
	}

.ColorPreview {
background: rgb(0,0,0); 
float: left;
height: 5em;
width: 6.25%;
border-bottom: 0px solid;
border-color: lightgrey;
}

#Color_0 {border-bottom: 0px solid;}
#Color_1 {border-bottom: 0px solid;}
#Color_2 {border-bottom: 0px solid;}
#Color_3 {border-bottom: 0px solid;}
#Color_4 {border-bottom: 0px solid;}
#Color_5 {border-bottom: 0px solid;}
#Color_6 {border-bottom: 0px solid;}
#Color_7 {border-bottom: 0px solid;}
#Color_8 {border-bottom: 0px solid;}
#Color_9 {border-bottom: 0px solid;}
#Color_10 {border-bottom: 0px solid;}
#Color_11 {border-bottom: 0px solid;}
#Color_12 {border-bottom: 0px solid;}
#Color_13 {border-bottom: 0px solid;}
#Color_14 {border-bottom: 0px solid;}
#Color_15 {border-bottom: 0px solid;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="PreviewTable" >
<div class="ColorPreview" id="Color_0" data-col="0">Color0</div>
<div class="ColorPreview" id="Color_1" data-col="1">Color1</div>
<div class="ColorPreview" id="Color_2" data-col="2">Color2</div>
<div class="ColorPreview" id="Color_3" data-col="3">Color3</div>
<div class="ColorPreview" id="Color_4" data-col="4">Color4</div>
<div class="ColorPreview" id="Color_5" data-col="5">Color5</div>
<div class="ColorPreview" id="Color_6" data-col="6">Color6</div>
<div class="ColorPreview" id="Color_7" data-col="7">Color7</div>
<div class="ColorPreview" id="Color_8" data-col="8">Color8</div>
<div class="ColorPreview" id="Color_9" data-col="9">Color9</div>
<div class="ColorPreview" id="Color_10" data-col="10">Color10</div>
<div class="ColorPreview" id="Color_11" data-col="11">Color11</div>
<div class="ColorPreview" id="Color_12" data-col="12">Color12</div>
<div class="ColorPreview" id="Color_13" data-col="13">Color13</div>
<div class="ColorPreview" id="Color_14" data-col="14">Color14</div>
<div class="ColorPreview" id="Color_15" data-col="15">Color15</div>
</div>
<div>
&nbsp;
</div>
<div>
<p>
right click to remove marker
</p>
</div>
<div>
<p>red</p>
<span id="spanHueIndex"></span>
<p> <input class="slider Paletteslider" id="red" type="range" step="1" min="0" max="255" value="0" /></p>
<p>green</p>
<span id="spanSaturationIndex"></span>
<p> <input class="slider Paletteslider" id="green" type="range" step="1" min="0" max="255" value="0" /></p>
<p>blue</p>
<span id="spanLightnessIndex"></span>
<p> <input class="slider Paletteslider" id="blue" type="range" step="1" min="0" max="255" value="0" /></p>
</div>