宣言的なQMLでRGBで定義された色を非飽和化する方法

Question

QtQuickを使用すると、RGBで定義された既存の色を使用し、Javascriptに依存せずに不飽和化できますか？

Answer 1

QtQuickがJavascriptエンジン上でどのように動作するのかを見て、何もをJavascriptに頼らずに実行することはできません。

彩度を調整するには、RGBをHSLカラーに変換してからRGBに戻す必要があります。 QMLは、後者のためにQt.hsla()がありますが、私がチェックした最後の時間は、それはHSLにRGBからの変換を提供しなかったので、私はこれを使用して終了：

function rgbToHsl(r, g, b) { 
    r /= 255 
    g /= 255 
    b /= 255 
    var max = Math.max(r, g, b), min = Math.min(r, g, b) 
    var h, s, l = (max + min)/2 
    if (max == min) { 
    h = s = 0 
    } else { 
    var d = max - min 
    s = l > 0.5 ? d/(2 - max - min) : d/(max + min) 
    switch (max) { 
    case r: 
     h = (g - b)/d + (g < b ? 6 : 0) 
     break 
    case g: 
     h = (b - r)/d + 2 
     break 
    case b: 
     h = (r - g)/d + 4 
     break 
    } 
    h /= 6; 
    } 
    return {"h":h, "s":s, "l":l}; 
} 

だから基本的には：

var ic = yourRGBColor.toString() 
var r = parseInt(ic.substr(1, 2), 16) 
var g = parseInt(ic.substr(3, 2), 16) 
var b = parseInt(ic.substr(5, 2), 16) 
var hsl = rgbToHsl(r, g, b) 
hsl.s *= .5 // desaturate 50% 
yourRGBColor = Qt.hsla(hsl.h, hsl.s, hsl.l, 1) 

Answer 2

function desaturate(colorString) 
{ 
    var c = Qt.darker(colorString, 1.0); 
    return Qt.hsla(c.hslHue, 0.0, c.hslLightness, c.a); 
} 

Answer 3

color modelに応じて、色のhsvSaturation、またはhslSaturationのプロパティを変更するだけです。

例徐々に毎秒青色の長方形を脱飽和（qmlscene Test.qmlで実行）Test.qml：コードのテキストの多くに隠さ

import QtQuick 2.7 
Item { 
    width: 100 
    height: 100 
    Rectangle { 
     anchors.fill: parent 
     objectName: "precious" 
     color: "#0000FF" 
     Timer { 
      running: true 
      repeat: true 
      onTriggered: parent.color.hslSaturation *= 0.8; 
     } 
    } 
} 

、両者のブロックは、これらの特性は実際 color QML Basic Typeに記載されています。これらは、C++の qrealバージョンのカラーコンポーネントプロパティ（対応名は ...F()）に対応しています。

---

@dtechの状態では、onTriggered:...は合法的に既にJavaScriptの行です。必要がある場合は、C++でその行を見て、要素の属性を見つけてそこのプロパティを変更することもできます。

#include <QGuiApplication> 
#include <QQuickView> 
#include <QQuickItem> 

int main(int argc, char *argv[]) 
{ 
    QGuiApplication app(argc, argv); 
    QQuickView view(QUrl(QLatin1String("qrc:/Test.qml"))); 
    view.show(); 
    if (QObject * rectangle = view.rootObject()->findChild<QObject*>("precious")) 
    { 
     qreal h, s, l, a; 
     rectangle->property("color").value<QColor>().getHslF(&h, &s, &l, &a); 
     s *= 0.2; 
     rectangle->setProperty("color", QVariant::fromValue(QColor::fromHsvF(h, s, l, a))); 
    } 
    return app.exec(); 
} 

：徐々にそれは（まだQML/JavaScriptで行わ）脱飽和、（純粋にC++で）既に非常に脱飽和で始まること、青い四角形を上記 Test.qmlを示す

例main.cpp、

JavaScriptの見かけ上の行をTest.qmlから削除できました。

---

非常に粗いカラーアニメーションを示しています。より良いやり方をする特別なColorAnimationツールがあります。