如何旋轉180度

Question

我實現了光譜顏色選擇器 。 我正在嘗試將.alphaSlider旋轉180度。 當然，我可以使用CSS來做到這一點（使用transform: rotate(180deg) ），但這有點像hack，而且總會有其他問題。 我想用JavaScript源文件來做。

如何編輯源文件，以便可以旋轉180度.alphaSlider ？

以下是相關代碼：

來源：（行：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);

資料來源：（行：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

繁榮！ 做完了 參見jsfiddle。 （摘錄不允許我發布所有代碼。）

• 紅色選擇器使用水平法線
• 藍色使用垂直法線。
• 綠色使用水平翻轉。
• Aqua使用垂直翻轉。

尚未在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
    });
});