Question

我实施了spectrum color picker。我正在尝试旋转.alphaSlider 180度。当然我可以用CSS（使用transform: rotate(180deg)）来做到这一点，但这有点像黑客，而且，无论如何都会有其他问题。我想使用JavaScript source file。

来做

如何编辑source file以便我可以将.alphaSlider旋转180度？

以下是相关代码：

Source: (Lines: 387-395)

draggable(alphaSlider, function (dragX, dragY, e) {
    currentAlpha = (dragX / alphaWidth);
    isEmpty = false;
    if (e.shiftKey) {
        currentAlpha = Math.round(currentAlpha * 10) / 10;
    }
    move();
}, dragStart, dragStop);

Source: (Lines: 1068 - 1073)

var t0 = e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0];
var pageX = t0 && t0.pageX || e.pageX;
var pageY = t0 && t0.pageY || e.pageY;

var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));

Answer 1

BOOM！完成。见jsfiddle。（Snippet不允许我发布所有代码。）

红色选择器使用水平法线
蓝色使用垂直法线。
绿色使用水平翻转。
Aqua使用垂直翻转。

Haven在IE中测试过。

http://jsfiddle.net/4z7d6ze5/2/

这样称呼：

$(document).ready(function() {
    $("#custom").spectrum({
        color: "#FF0000",
        showAlpha: true
    });
    $("#custom2").spectrum({
        color: "#0000FF",
        showAlpha: true,
        alphaVertical: true
    });
    $("#custom3").spectrum({
        color: "#00FF00",
        showAlpha: true,
        flipAlpha: true
    });
    $("#custom4").spectrum({
        color: "#00FFFF",
        showAlpha: true,
        flipAlpha: true,
        alphaVertical: true
    });
});

如何旋转180度

1 个答案: