Qt6 QML Book/画布/阴影

Shadows

阴影

A path can be visually enhanced using shadows with the 2D context object. A shadow is an area around the path with an offset, color and specified blurring. For this you can specify a shadowColor, shadowOffsetX, shadowOffsetY and a shadowBlur. All of this needs to be defined using the 2D context. The 2D context is your only API to the drawing operations.

可以使用2D上下文对象的阴影对路径进行视觉增强。阴影是路径周围具有偏移、颜色和指定模糊的区域。为此，可以指定shadowColor、shadowOffsetX、shadowOffsetY和shadowBlur。所有这些都需要使用2D上下文来定义。2D上下文是图形操作的唯一API。

A shadow can also be used to create a glow effect around a path. In the next example, we create a text “Canvas” with a white glow around. All this on a dark background for better visibility.

阴影也可用于在路径周围创建辉光效果。在下一个示例中，我们创建了一个文本“Canvas”，周围有白色的光晕。所有这些都是在黑色的背景下进行的，以获得更好的可视性。

First, we draw the dark background:

首先，我们绘制暗背景：

// setup a dark background
ctx.strokeStyle = "#333"
ctx.fillRect(0,0,canvas.width,canvas.height);

then we define our shadow configuration, which will be used for the next path:

然后定义阴影配置，该配置将用于下一个路径：

// setup a blue shadow
ctx.shadowColor = "#2ed5fa";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 10;

Finally, we draw our “Canvas” text using a large bold 80px font from the Ubuntu font family.

最后，我们使用Ubuntu字体系列中的粗体80px字体绘制“画布”文本。

// render green text
ctx.font = 'bold 80px sans-serif';
ctx.fillStyle = "#24d12e";
ctx.fillText("Canvas!",30,180);

  示例源码下载