123

Posted 2021-05-16 NQian

1. 1.Canvas介绍

   Canvas是一个允许绘制直线和曲线、简单和复杂的形状、图形和引用的图形图像。它还可以添加文本、颜色、阴影、渐变和图案，并执行低级别像素操作。Canvas输出可以另存为图像文件或序列化到URL。

   例如，以下代码创建一个Canvas项目，该项目具有高度为100像素、宽度为200像素的绘图区域：

    

   import QtQuick 2.0

     Canvas {

         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);

         }

     } 

   目前Canvas项仅支持二维渲染上下文。

    

   Canvas常用属性和方法如下所示:

   Properties

   available : bool,该属性用于设置Canvs是否可用，只有为true时后续的操作才有效；

   canvasSize : size

   context : object,保存活动的绘图上下文。如果画布已经准备好，并且成功调用了getContext()，或者contextType属性已经设置了支持的上下文类型，那么这个属性将包含当前的绘图上下文，否则为空。

   contextType : string,保存绘图上下文的类型,对于Context2D,该值将为"2d"

   renderStrategy : enumeration,保存当前画布渲染策略

    

   Canvas.Immediate - context将在UI主线程中立即执行图形命令

   Canvas.Threaded - 当前要绘制的图形延迟到私有的线程里执行(不在UI主线程中立即执行)

   Canvas.Cooperative - context will defer graphics commands to the applications global render thread.

    

   renderTarget : enumeration

   Signals

   imageLoaded()

   paint(rect region)

   painted()

   Methods

   cancelRequestAnimationFrame(int handle)

   object getContext(string contextId, ... args)

   isImageError(url image)

   isImageLoaded(url image)

   isImageLoading(url image)

   loadImage(url image)

   markDirty(rect area)

   int requestAnimationFrame(callback)

   requestPaint()

   bool save(string filename)

   string toDataURL(string mimeType)

   unloadImage(url image)