| CMakeLists.txt |
|
1398 |
- |
| qcanvas2dbrushvaluetype.cpp |
!
\qmlvaluetype lineargradient2d
\inqmlmodule QtCanvas2D
\since 6.12
\brief Provides lineargradient2d type matching to QCanvasLinearGradient.
This value type is provided by the \l{QtCanvas2D} import.
\sa QCanvasLinearGradient
|
26432 |
- |
| qcanvas2dbrushvaluetype_p.h |
|
9572 |
- |
| qcanvas2dcommandbuffer.cpp |
|
1272 |
- |
| qcanvas2dcommandbuffer_p.h |
|
12211 |
- |
| qcanvas2dcontext.cpp |
!
\qmltype Canvas2DContext
\inqmlmodule QtCanvas2D
\since 6.12
\brief Provides a 2D context for drawing on a Canvas2D item.
The Canvas2DContext object can be created by \c Canvas item's \c getContext()
method:
\code
Canvas2D {
id: canvas
onPaint: {
var ctx = canvas.getContext('2d');
//...
}
}
\endcode
The Context2D API implements the same \l
{http://www.w3.org/TR/2dcontext}{W3C Canvas 2D Context API standard} with
some enhanced features.
The Context2D API provides the rendering \b{context} which defines the
methods and attributes needed to draw on the \c Canvas item. The following
assigns the canvas rendering context to a \c{context} variable:
\code
var context = mycanvas.getContext("2d")
\endcode
Here is a simple example of using Canvas2D to create a round button.
\table
\row
\li \inlineimage canvas2d-buttonexample.webp
\li
\code
let offsetX = 2;
let offsetY = 4;
let shadow = ctx.createBoxShadow(40 + offsetX, 70 + offsetY,
120, 60);
shadow.setRadius(30);
shadow.setBlur(15);
shadow.setColor("#60373F26");
ctx.drawBoxShadow(shadow);
// Paint rounded rect
ctx.beginPath();
ctx.roundRect(40, 70, 120, 60, 30);
ctx.fillStyle = "#DBEB00";
ctx.fill();
// Paint text
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "24px 'Titillium Web'";
ctx.fillStyle = "#373F26";
ctx.fillText("CLICK!", 100, 100);
\endcode
\endtable
Here is another example of painting a simple graph.
\table
\row
\li \inlineimage canvas2d-graphexample.webp
\li
\code
// Paint grid
const grid = ctx.createGridPattern(0, 0, 10, 10,
"#404040",
"#202020");
const w = 200;
const h = 200;
ctx.fillStyle = grid;
ctx.fillRect(0, 0, w, h);
// Paint axis
ctx.fillStyle = "white";
ctx.fillRect(0, 0.5 * h - 1, w, 2);
ctx.fillRect(0.5 * w - 1, 0, 2, h);
// Paint shadowed graph
ctx.beginPath();
ctx.moveTo(20, h * 0.8);
ctx.bezierCurveTo(w * 0.2, h * 0.4,
w * 0.5, h * 0.8,
w - 20, h * 0.2);
ctx.antialias = 10;
ctx.lineWidth = 12;
ctx.strokeStyle = "#D0000000";
ctx.stroke();
ctx.antialias = 1;
ctx.lineWidth = 6;
const lg = ctx.createLinearGradient(0, 0, 0, h);
lg.addColorStop(0, "red");
lg.addColorStop(1, "green");
ctx.strokeStyle = lg;
ctx.stroke();
\endcode
\endtable
|
181059 |
- |
| qcanvas2dcontext_p.h |
|
7397 |
- |
| qcanvas2ditem.cpp |
!
\qmltype Canvas2D
\inqmlmodule QtCanvas2D
\since 6.12
\brief Provides a 2D canvas item enabling drawing via JavaScript.
The Canvas2D item allows drawing of straight and curved lines, simple and
complex shapes, graphs, and referenced graphic images. It can also add
text, colors, gradients, and patterns.
Rendering to the Canvas is done using a Canvas2DContext object, usually as a
result of the \l paint signal.
To define a drawing area in the Canvas2D item set the \c width and \c height
properties. For example, the following code creates a Canvas2D item which
has a drawing area with a height of 100 pixels and width of 200 pixels:
\qml
import QtCanvas2D
Canvas2D {
id: mycanvas
width: 100
height: 200
onPaint: {
var ctx = getContext("2d");
ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
ctx.fillRect(0, 0, width, height);
}
}
\endqml
\section1 Tips for Porting Existing HTML5 Canvas Applications
Although the Canvas item provides an HTML5-like API, HTML5 canvas
applications need to be modified to run in the Canvas item:
\list
\li Replace all DOM API calls with QML property bindings or Canvas item methods.
\li Replace all HTML event handlers with the MouseArea item.
\li Change setInterval/setTimeout function calls with the \l FrameAnimation item or
the use of requestAnimationFrame().
\li Place painting code into the \c onPaint handler and trigger
painting by calling the markDirty() or requestPaint() methods.
\li To draw images, load them by calling the Canvas's loadImage() method and then request to paint
them in the \c onImageLoaded handler.
\endlist
\sa Canvas2DContext, QCanvasPainterItem, QCanvasPainter
|
22272 |
- |
| qcanvas2ditem_p.h |
|
4950 |
- |
| qcanvas2ditemrenderer.cpp |
|
19495 |
- |
| qcanvas2ditemrenderer_p.h |
|
4216 |
- |
| qcanvas2dpathvaluetype.cpp |
!
\qmlvaluetype path2d
\inqmlmodule QtCanvas2D
\since 6.12
\brief Provides path2d type, a painter path container matching to QCanvasPath.
This value type is provided by the \l{QtCanvas2D} import.
\sa QCanvasPath
|
10138 |
- |
| qcanvas2dpathvaluetype_p.h |
|
2726 |
- |
| qcanvas2dtransformvaluetype.cpp |
!
\qmlvaluetype transform2d
\inqmlmodule QtCanvas2D
\since 6.12
\brief Provides transform2d type,a 3x3 2D transformation matrix,
matching to QTransform.
A \c transform2d type has nine values, each accessible via the properties
\c m11 through \c m33 in QML (in row/column order).
A property of type \c transform2d defaults to the identity matrix, whose
diagonal entries \c m11, \c m22 and \c m33 are all \c 1, with all
other components \c 0.
This value type is provided by the \l{QtCanvas2D} import.
\sa QTransform
|
6742 |
- |
| qcanvas2dtransformvaluetype_p.h |
|
2222 |
- |
| qcanvas2dutils.cpp |
Attempts to set the font size of \a font to \a fontSizeToken, returning
\c true if successful. If the font size is invalid, \c false is returned
and a warning is printed.
|
11297 |
- |
| qcanvas2dutils_p.h |
|
692 |
- |
| qtcanvas2dglobal_p.h |
|
543 |
- |