javascript - 如何旋转 180 度

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

轰!完毕。参见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
    });
});