如何旋转 180 度答案

【问题标题】：How to Rotate 180 Deg如何旋转 180 度
【发布时间】：2015-12-14 23:19:07
【问题描述】：

我实现了spectrum color picker。我正在尝试将.alphaSlider 旋转 180 度。当然，我可以使用 CSS（使用 transform: rotate(180deg)）来实现，但这有点像 hack，而且无论如何都会有其他问题。我想使用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));

【问题讨论】：

这里的问题还不清楚。您是否尝试使用 CSS 来旋转 HTML 元素 而不使用？如果是这样，我认为这是不可能的。如果一个元素以 HTML 呈现，那么样式/转换它的唯一方法是使用 CSS。究竟是什么阻止了您进行 CSS 转换？
@JCD 在我看来，他希望光谱颜色选择器库的 alpha 条显示为垂直而不是水平。这并不简单。我正在学习一些 Node.JS 的东西，我将使用这个问题作为我的第一个项目。 ;)
@Tom 我是本垒打！ :-)
stackoverflow.com/questions/15935837/… ?
@Mike'Pomax'Kamermans 这不是 uislider，它是定制的。

标签： javascript jquery spectrumjs

【解决方案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
    });
});

【讨论】：

正是我想要的！你改变了css吗？
你应该明确地将这个添加到 github 上的拉取请求中：github.com/bgrins/spectrum/pulls 我为此工作了一整天，现在终于找到了解决方案！
@Horay github.com/bgrins/spectrum/pull/384 我不太确定我是否看到这些更改的主要好处，但也许他们会接受。