如何旋转 180 度

Question

我实现了spectrum color picker. I'm trying to rotate the .alphaSlider 180 deg. Of course I can do it with CSS (using transform: rotate(180deg)), but that's sort of a hack, and, there will anyway be other problems. I want to do it using the 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。（代码段不允许我 post 所有代码。）

红色拾色器使用水平法线
蓝色使用垂直法线。
绿色使用水平翻转。
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
    });
});

如何旋转 180 度

How to Rotate 180 Deg

javascript

jquery

spectrumjs