peranger/qskinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alternative qml implementation added ( can be started with shapes -qml )

Browse Source
This commit is contained in:
Uwe Rathmann 2022-12-03 17:19:07 +01:00
parent b7434939ec
commit fad8d8a616
8 changed files with 645 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
playground/shapes/GeometricShape.cpp Normal file
View File

@ -0,0 +1,57 @@
/******************************************************************************
* QSkinny - Copyright (C) 2016 Uwe Rathmann
* This file may be used under the terms of the 3-clause BSD License
*****************************************************************************/
#include "GeometricShape.h"
#include "Stroke.h"
#include <SkinnyShapeFactory.h>
GeometricShape::GeometricShape( QQuickItem* parent )
: ShapeItem( parent )
{
}
GeometricShape::GeometricShape( Figure figure, QQuickItem* parent )
: GeometricShape( parent )
{
setFigure( figure );
}
void GeometricShape::setFigure( Figure figure )
{
m_figure = figure;
using namespace SkinnyShapeFactory;
setPath( shapePath( static_cast< Shape >( figure ), QSizeF( 50, 50 ) ) );
}
GeometricShape::Figure GeometricShape::figure() const
{
return m_figure;
}
void GeometricShape::setBorder( const QColor& color )
{
Stroke stroke( color );
#if 0
stroke.setCosmetic( true );
#endif
stroke.setWidth( stroke.isCosmetic() ? 8 : 2 );
stroke.setJoinStyle( Stroke::MiterJoin );
#if 0
stroke.setLineStyle( Stroke::DashLine );
stroke.setColor( QskRgb::toTransparent( color, 100 ) );
#endif
setStroke( stroke );
}
QColor GeometricShape::border() const
{
return stroke().color();
}
#include "moc_GeometricShape.cpp"

45
playground/shapes/GeometricShape.h Normal file
View File

@ -0,0 +1,45 @@
/******************************************************************************
* QSkinny - Copyright (C) 2016 Uwe Rathmann
* This file may be used under the terms of the 3-clause BSD License
*****************************************************************************/
#pragma once
#include "ShapeItem.h"
class GeometricShape : public ShapeItem
{
Q_OBJECT
Q_PROPERTY( Figure figure READ figure WRITE setFigure )
Q_PROPERTY( QColor border READ border WRITE setBorder )
public:
enum Figure
{
Rectangle,
Diamond,
TriangleDown,
TriangleUp,
TriangleLeft,
TriangleRight,
Ellipse,
Ring,
Star,
Hexagon,
Arc
};
Q_ENUM( Figure );
GeometricShape( QQuickItem* parent = nullptr );
GeometricShape( Figure figure, QQuickItem* parent = nullptr );
void setFigure( Figure );
Figure figure() const;
void setBorder( const QColor& );
QColor border() const;
private:
Figure m_figure = Rectangle;
};

211
playground/shapes/Window.cpp Normal file
View File

@ -0,0 +1,211 @@
/******************************************************************************
* QSkinny - Copyright (C) 2016 Uwe Rathmann
* This file may be used under the terms of the 3-clause BSD License
*****************************************************************************/
#include "Window.h"
#include "GeometricShape.h"
#include <QskRgbValue.h>
#include <QskLinearBox.h>
#include <QskTabView.h>
#include <QskGradientDirection.h>
namespace
{
class Page : public QskLinearBox
{
public:
Page( QQuickItem* parent = nullptr )
: QskLinearBox( Qt::Horizontal, 2, parent )
{
}
};
class LinearGradientPage : public Page
{
public:
LinearGradientPage( QQuickItem* parent = nullptr )
: Page( parent )
{
{
auto shapeItem = new GeometricShape( GeometricShape::Hexagon, this );
shapeItem->setBorder( QskRgb::Indigo );
QskGradient gradient( QGradient::PhoenixStart );
gradient.setLinearDirection( 0.0, 0.0, 0.2, 0.5 );
gradient.setSpread( QskGradient::ReflectSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new GeometricShape( GeometricShape::Star, this );
shapeItem->setBorder( Qt::black );
const QVector< QskGradientStop > stops =
{ { 0.5, QskRgb::RoyalBlue }, { 0.5, QskRgb::LemonChiffon } };
QskGradient gradient( stops );
gradient.setLinearDirection( 0.0, 0.0, 0.05, 0.1 );
gradient.setSpread( QskGradient::RepeatSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new GeometricShape( GeometricShape::Rectangle, this );
shapeItem->setBorder( Qt::black );
const QVector< QskGradientStop > stops =
{ { 0.5, QskRgb::MediumVioletRed }, { 0.5, QskRgb::Navy } };
QskGradient gradient( stops );
gradient.setLinearDirection( 0.5, 0.0, 0.5, 0.5 );
shapeItem->setGradient( gradient );
}
}
};
class RadialGradientPage : public Page
{
public:
RadialGradientPage( QQuickItem* parent = nullptr )
: Page( parent )
{
{
auto shapeItem = new GeometricShape( GeometricShape::Rectangle, this );
shapeItem->setBorder( QskRgb::Indigo );
QskGradient gradient( QskRgb::LightYellow, QskRgb::MidnightBlue );
gradient.setRadialDirection( QskRadialDirection() );
gradient.setSpread( QskGradient::PadSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new GeometricShape( GeometricShape::Ellipse, this );
shapeItem->setBorder( Qt::black );
QVector< QskGradientStop > stops;
stops += QskGradientStop( 0.0, Qt::green );
stops += QskGradientStop( 0.2, Qt::green );
stops += QskGradientStop( 0.2, Qt::red );
stops += QskGradientStop( 0.4, Qt::red );
stops += QskGradientStop( 0.4, Qt::yellow );
stops += QskGradientStop( 0.6, Qt::yellow );
stops += QskGradientStop( 0.6, Qt::cyan );
stops += QskGradientStop( 0.8, Qt::cyan );
stops += QskGradientStop( 0.8, Qt::darkCyan );
stops += QskGradientStop( 1.0, Qt::darkCyan );
QskGradient gradient( stops );
gradient.setDirection( QskGradient::Radial );
gradient.setSpread( QskGradient::PadSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new GeometricShape( GeometricShape::Rectangle, this );
shapeItem->setBorder( QskRgb::Indigo );
QskGradient gradient( QGradient::LilyMeadow );
gradient.setRadialDirection( 0.5, 0.7, 0.25 );
gradient.setSpread( QskGradient::RepeatSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new GeometricShape( GeometricShape::Rectangle, this );
shapeItem->setBorder( QskRgb::Indigo );
QskGradient gradient( Qt::red, Qt::blue );
gradient.setRadialDirection( 0.6, 0.4, 0.1 );
gradient.setSpread( QskGradient::ReflectSpread );
shapeItem->setGradient( gradient );
}
}
};
class ConicGradientPage : public Page
{
public:
ConicGradientPage( QQuickItem* parent = nullptr )
: Page( parent )
{
{
auto shapeItem = new GeometricShape( GeometricShape::Ellipse, this );
shapeItem->setBorder( Qt::black );
QskGradient gradient( QGradient::JuicyPeach );
gradient.setConicDirection( 0.5, 0.5, 30.0, 60.0 );
gradient.setSpread( QskGradient::ReflectSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new GeometricShape( GeometricShape::TriangleUp, this );
shapeItem->setBorder( Qt::black );
QskGradient gradient( QGradient::WinterNeva );
gradient.setConicDirection( 0.5, 0.5, 30.0, 60.0 );
gradient.setSpread( QskGradient::RepeatSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new GeometricShape( GeometricShape::Arc, this );
shapeItem->setBorder( Qt::black );
QskGradient gradient( QGradient::SpikyNaga );
gradient.setConicDirection( 0.5, 0.5, 300.0, -240.0 );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new GeometricShape( GeometricShape::Diamond, this );
QskGradient gradient( QGradient::FabledSunset );
gradient.setConicDirection( 0.5, 0.5, 45.0, 180.0 );
gradient.setSpread( QskGradient::ReflectSpread );
shapeItem->setGradient( gradient );
}
}
};
class TabView : public QskTabView
{
public:
TabView( QQuickItem* parentItem = nullptr )
: QskTabView( parentItem )
{
setMargins( 10 );
setAutoFitTabs( true );
setTabBarEdge( Qt::TopEdge );
addTab( "Radial Gradients", new RadialGradientPage() );
addTab( "Conic Gradients", new ConicGradientPage() );
addTab( "Linear Gradients", new LinearGradientPage() );
}
};
}
Window::Window()
{
setColor( Qt::gray );
addItem( new TabView() );
resize( 800, 600 );
}

14
playground/shapes/Window.h Normal file
View File

@ -0,0 +1,14 @@
/******************************************************************************
* QSkinny - Copyright (C) 2016 Uwe Rathmann
* This file may be used under the terms of the 3-clause BSD License
*****************************************************************************/
#pragma once
#include <QskWindow.h>
class Window : public QskWindow
{
public:
Window();
};

281
playground/shapes/main.cpp
View File

@ -3,246 +3,45 @@
* This file may be used under the terms of the 3-clause BSD License
*****************************************************************************/
#include "ShapeItem.h"
#include "Window.h"
#include "GeometricShape.h"
#include "Stroke.h"
#include <QskQml.h>
#include <QskObjectCounter.h>
#include <QskWindow.h>
#include <QskRgbValue.h>
#include <QskLinearBox.h>
#include <QskTabView.h>
#include <QskGradientDirection.h>
#include <SkinnyShortcut.h>
#include <SkinnyShapeFactory.h>
#include <QGuiApplication>
#include <QBrush>
namespace
#include <QQmlApplicationEngine>
template< typename T >
static inline int registerType( const char* qmlName )
{
class Page : public QskLinearBox
{
public:
Page( QQuickItem* parent = nullptr )
: QskLinearBox( Qt::Horizontal, 2, parent )
{
}
return qmlRegisterType< T >( "Shapes", 1, 0, qmlName );
}
protected:
static Stroke createStroke( const QColor& color )
{
Stroke stroke( color );
#if 0
stroke.setCosmetic( true );
template< typename T >
static inline int registerValueType( const char* qmlName )
{
#if QT_VERSION >= QT_VERSION_CHECK( 6, 0, 0 )
QByteArray name = qmlName;
name.data()[0] = std::tolower( name.data()[0] );
registerType< T >( name.constData() );
#else
return qmlRegisterUncreatableType< T >( "Shapes", 1, 0, qmlName, QString() );
#endif
}
stroke.setWidth( stroke.isCosmetic() ? 8 : 2 );
stroke.setJoinStyle( Stroke::MiterJoin );
#if 0
// stroke.setLineStyle( Stroke::DashLine );
stroke.setColor( QskRgb::toTransparent( color, 100 ) );
#endif
return stroke;
}
static QPainterPath path( SkinnyShapeFactory::Shape shape )
{
return SkinnyShapeFactory::shapePath( shape, QSizeF( 50, 50 ) );
}
};
class LinearGradientPage : public Page
static bool doQml( int argc, char* argv[] )
{
for ( int i = 1; i < argc; i++ )
{
public:
LinearGradientPage( QQuickItem* parent = nullptr )
: Page( parent )
{
{
auto shapeItem = new ShapeItem( this );
if ( strcmp( argv[i], "-qml" ) == 0 )
return true;
}
shapeItem->setPath( path( SkinnyShapeFactory::Hexagon ) );
shapeItem->setStroke( createStroke( QColorConstants::Svg::indigo ) );
QskGradient gradient( QGradient::PhoenixStart );
gradient.setLinearDirection( 0.0, 0.0, 0.2, 0.5 );
gradient.setSpread( QskGradient::ReflectSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new ShapeItem( this );
shapeItem->setPath( path( SkinnyShapeFactory::Star ) );
shapeItem->setStroke( Qt::black );
const QVector< QskGradientStop > stops =
{ { 0.5, QskRgb::RoyalBlue }, { 0.5, QskRgb::LemonChiffon } };
QskGradient gradient( stops );
gradient.setLinearDirection( 0.0, 0.0, 0.05, 0.1 );
gradient.setSpread( QskGradient::RepeatSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new ShapeItem( this );
shapeItem->setPath( path( SkinnyShapeFactory::Rectangle ) );
shapeItem->setStroke( Qt::black );
const QVector< QskGradientStop > stops =
{ { 0.5, QskRgb::MediumVioletRed }, { 0.5, QskRgb::Navy } };
QskGradient gradient( stops );
gradient.setLinearDirection( 0.5, 0.0, 0.5, 0.5 );
shapeItem->setGradient( gradient );
}
}
};
class RadialGradientPage : public Page
{
public:
RadialGradientPage( QQuickItem* parent = nullptr )
: Page( parent )
{
{
auto shapeItem = new ShapeItem( this );
shapeItem->setPath( path( SkinnyShapeFactory::Rectangle ) );
shapeItem->setStroke( createStroke( QColorConstants::Svg::indigo ) );
QskGradient gradient( QskRgb::LightYellow, QskRgb::MidnightBlue );
gradient.setRadialDirection( QskRadialDirection() );
gradient.setSpread( QskGradient::PadSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new ShapeItem( this );
shapeItem->setPath( path( SkinnyShapeFactory::Ellipse ) );
shapeItem->setStroke( Qt::black );
QVector< QskGradientStop > stops;
stops += QskGradientStop( 0.0, Qt::green );
stops += QskGradientStop( 0.2, Qt::green );
stops += QskGradientStop( 0.2, Qt::red );
stops += QskGradientStop( 0.4, Qt::red );
stops += QskGradientStop( 0.4, Qt::yellow );
stops += QskGradientStop( 0.6, Qt::yellow );
stops += QskGradientStop( 0.6, Qt::cyan );
stops += QskGradientStop( 0.8, Qt::cyan );
stops += QskGradientStop( 0.8, Qt::darkCyan );
stops += QskGradientStop( 1.0, Qt::darkCyan );
QskGradient gradient( stops );
gradient.setDirection( QskGradient::Radial );
gradient.setSpread( QskGradient::PadSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new ShapeItem( this );
shapeItem->setPath( path( SkinnyShapeFactory::Rectangle ) );
shapeItem->setStroke( createStroke( QskRgb::Indigo ) );
QskGradient gradient( QGradient::LilyMeadow );
gradient.setRadialDirection( 0.5, 0.7, 0.25 );
gradient.setSpread( QskGradient::RepeatSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new ShapeItem( this );
shapeItem->setPath( path( SkinnyShapeFactory::Rectangle ) );
shapeItem->setStroke( createStroke( QskRgb::Indigo ) );
QskGradient gradient( Qt::red, Qt::blue );
gradient.setRadialDirection( 0.6, 0.4, 0.1 );
gradient.setSpread( QskGradient::ReflectSpread );
shapeItem->setGradient( gradient );
}
}
};
class ConicGradientPage : public Page
{
public:
ConicGradientPage( QQuickItem* parent = nullptr )
: Page( parent )
{
{
auto shapeItem = new ShapeItem( this );
shapeItem->setPath( path( SkinnyShapeFactory::Ellipse ) );
shapeItem->setStroke( Qt::black );
QskGradient gradient( QGradient::JuicyPeach );
gradient.setConicDirection( 0.5, 0.5, 30.0, 60.0 );
gradient.setSpread( QskGradient::ReflectSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new ShapeItem( this );
shapeItem->setPath( path( SkinnyShapeFactory::TriangleUp ) );
shapeItem->setStroke( Qt::black );
QskGradient gradient( QGradient::WinterNeva );
gradient.setConicDirection( 0.5, 0.5, 30.0, 60.0 );
gradient.setSpread( QskGradient::RepeatSpread );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new ShapeItem( this );
shapeItem->setStroke( Qt::black );
shapeItem->setPath( path( SkinnyShapeFactory::Arc ) );
QskGradient gradient( QGradient::SpikyNaga );
gradient.setConicDirection( 0.5, 0.5, 300.0, -240.0 );
shapeItem->setGradient( gradient );
}
{
auto shapeItem = new ShapeItem( this );
shapeItem->setPath( path( SkinnyShapeFactory::Diamond ) );
QskGradient gradient( QGradient::FabledSunset );
gradient.setConicDirection( 0.5, 0.5, 45.0, 180.0 );
gradient.setSpread( QskGradient::ReflectSpread );
shapeItem->setGradient( gradient );
}
}
};
class TabView : public QskTabView
{
public:
TabView( QQuickItem* parentItem = nullptr )
: QskTabView( parentItem )
{
setMargins( 10 );
setAutoFitTabs( true );
setTabBarEdge( Qt::TopEdge );
addTab( "Radial Gradients", new RadialGradientPage() );
addTab( "Conic Gradients", new ConicGradientPage() );
addTab( "Linear Gradients", new LinearGradientPage() );
}
};
return false;
}
int main( int argc, char* argv[] )
@ -252,14 +51,28 @@ int main( int argc, char* argv[] )
#endif
QGuiApplication app( argc, argv );
SkinnyShortcut::enable( SkinnyShortcut::AllShortcuts );
QskWindow window;
window.setColor( Qt::gray );
window.addItem( new TabView() );
window.resize( 800, 600 );
window.show();
if ( doQml( argc, argv ) )
{
qDebug() << "Running QML";
return app.exec();
QskQml::registerTypes();
registerType< GeometricShape >( "Shape" );
registerValueType< Stroke >( "Stroke" );
QQmlApplicationEngine engine( QUrl( "qrc:/qml/shapes.qml" ) );
return app.exec();
}
else
{
qDebug() << "Running C++";
Window window;
window.show();
return app.exec();
}
}

9
playground/shapes/shapes.pro
View File

@ -1,10 +1,17 @@
CONFIG += qskexample
CONFIG += qskexample qskqmlexport
RESOURCES += \
shapes.qrc
HEADERS += \
Stroke.h \
ShapeItem.h \
GeometricShape.h \
Window.h
SOURCES += \
Stroke.cpp \
ShapeItem.cpp \
GeometricShape.cpp \
Window.cpp \
main.cpp

258
playground/shapes/shapes.qml Normal file
View File

@ -0,0 +1,258 @@
import QtQuick 2.0
import Skinny 1.0 as Qsk
import Shapes 1.0
import "qrc:/qml"
Qsk.Window
{
visible: true
width: 800
height: 600
color: "Gray"
Qsk.LinearBox
{
id: pageLinear
orientation: Qt.Horizontal
dimension: 2
Shape
{
figure: Shape.Hexagon
border: "indigo"
gradient:
({
linear: { x1: 0, y1: 0, x2: 0.2, y2: 0.5 },
spread: Qsk.Gradient.ReflectSpread,
// PhonixStart
stops: [
{ position: 0.0, color: "#f83600" },
{ position: 1.0, color: "#f9d423" }
]
})
}
Shape
{
figure: Shape.Star
border: "black"
gradient:
({
linear: { x1: 0, y1: 0, x2: 0.05, y2: 0.1 },
spread: Qsk.Gradient.RepeatSpread,
stops: [
{ position: 0.5, color: "RoyalBlue" },
{ position: 0.5, color: "LemonChiffon" }
]
})
}
Shape
{
figure: Shape.Rectangle
border: "black"
gradient:
({
linear: { x1: 0.5, y1: 0, x2: 0.5, y2: 0.5 },
stops: [
{ position: 0.5, color: "MediumVioletRed" },
{ position: 0.5, color: "Navy" }
]
})
}
}
Qsk.LinearBox
{
id: pageConic
orientation: Qt.Horizontal
dimension: 2
Shape
{
figure: Shape.Ellipse
border: "black"
gradient:
({
conic: { x: 0.5, y: 0.5, startAngle: 30, spanAngle: 60 },
spread: Qsk.Gradient.ReflectSpread,
// JuicyPeach
stops: [
{ position: 0.0, color: "#ffecd2" },
{ position: 1.0, color: "#fcb69f" }
]
})
}
Shape
{
figure: Shape.TriangleUp
border: "black"
gradient:
({
conic: { x: 0.5, y: 0.5, startAngle: 30, spanAngle: 60 },
spread: Qsk.Gradient.RepeatSpread,
// WinterNeva
stops: [
{ position: 0.0, color: "#a1c4fd" },
{ position: 1.0, color: "#c2e9fb" }
]
})
}
Shape
{
figure: Shape.Arc
border: "black"
gradient:
({
conic: { x: 0.5, y: 0.5, startAngle: 300, spanAngle: -240 },
// SpikyNaga
stops: [
{ position: 0.00, color: "#505285" },
{ position: 0.12, color: "#585e92" },
{ position: 0.25, color: "#65689f" },
{ position: 0.37, color: "#7474b0" },
{ position: 0.50, color: "#7e7ebb" },
{ position: 0.62, color: "#8389c7" },
{ position: 0.75, color: "#9795d4" },
{ position: 0.87, color: "#a2a1dc" },
{ position: 1.00, color: "#b5aee4" }
]
})
}
Shape
{
figure: Shape.Diamond
gradient:
({
conic: { x: 0.5, y: 0.5, startAngle: 45, spanAngle: 180 },
spread: Qsk.Gradient.ReflectSpread,
// FabledSunset
stops: [
{ position: 0.00, color: "#231557" },
{ position: 0.29, color: "#44107a" },
{ position: 0.67, color: "#ff1361" },
{ position: 1.00, color: "#fff800" }
]
})
}
}
Qsk.LinearBox
{
id: pageRadial
orientation: Qt.Horizontal
dimension: 2
Shape
{
figure: Shape.Rectangle
border: "indigo"
gradient:
({
radial: { x: 0.5, y: 0.5, radius: 0.5 },
stops: [
{ position: 0.0, color: "LightYellow" },
{ position: 1.0, color: "MidnightBlue" }
]
})
}
Shape
{
figure: Shape.Ellipse
border: "black"
gradient:
({
radial: { x: 0.5, y: 0.5, radius: 0.5 },
spread: Qsk.Gradient.PadSpread,
stops: [
{ position: 0.0, color: "lime" },
{ position: 0.2, color: "lime" },
{ position: 0.2, color: "red" },
{ position: 0.4, color: "red" },
{ position: 0.4, color: "yellow" },
{ position: 0.6, color: "yellow" },
{ position: 0.6, color: "cyan" },
{ position: 0.8, color: "cyan" },
{ position: 0.8, color: "darkcyan" },
{ position: 1.0, color: "darkcyan" }
]
})
}
Shape
{
figure: Shape.Rectangle
border: "indigo"
gradient:
({
radial: { x: 0.5, y: 0.7, radius: 0.25 },
spread: Qsk.Gradient.RepeatSpread,
// LilyMeadow
stops: [
{ position: 0.00, color: "#65379b" },
{ position: 0.53, color: "#886aea" },
{ position: 1.00, color: "#6457C6" }
]
})
}
Shape
{
figure: Shape.Rectangle
border: "indigo"
gradient:
({
radial: { x: 0.6, y: 0.4, radius: 0.1 },
spread: Qsk.Gradient.ReflectSpread,
stops: [
{ position: 0.0, color: "red" },
{ position: 1.0, color: "blue" }
]
})
}
}
Qsk.TabView
{
margins { left: 10; top: 10; right: 10; bottom: 10 }
autoFitTabs: true
tabBarEdge: Qt.TopEdge
Component.onCompleted:
{
addTab( "Radial Gradients", pageRadial );
addTab( "Conic Gradients", pageConic );
addTab( "Linear Gradients", pageLinear );
}
}
}

5
playground/shapes/shapes.qrc Normal file
View File

@ -0,0 +1,5 @@
<RCC>
<qresource prefix="/qml">
<file>shapes.qml</file>
</qresource>
</RCC>