Manipulating HTML5 Canvas Using Konva: Part 4, Styling

In thesecond tutorial of the series, you learned how to draw some basic shapes like rectangles, circles, and regular polygons using Konva. Thethird tutorial covered how you can use Konva to draw some more complex shapes like stars and rings as well as sprites on the canvas.

In this tutorial, we will go one step further and learn how to apply different styling to shapes by changing their fill and stroke values. You will also learn how to control the opacity of a shape and apply shadows to it. In the final sections, you will learn how to use blend modes to specify what the final result should look like if different shapes overlap.

Applying Fill and Stroke

We have been using the fill
and stroke
properties from the first tutorial of the series. However, we have only used them to fill shapes with a solid color so far. You can also fill a shape with gradients (both linear and radial) as well as images. The same goes for different strokes applied to a shape.

There are two ways of applying a fill to different shapes. You can either set the fill value using the fill
property when a shape is first created in Konva, or you can use the fill()
method to apply a fill dynamically in response to some events like hover, button click, etc.

When filling an element with a solid color, you can specify a value for the fill
property and it will work just fine. When using a linear gradient to fill the inside of a shape, you need to specify valid values for a lot of other properties like fillLinearGradientStartPoint
, fillLinearGradientEndPoint
, and fillLinearGradientColorStops
. The first two properties accept objects that specify the x and y co-ordinates of the start and end points of a gradient. You can also specify the x and y values separately using the fillLinearGradientStartPointX
, fillLinearGradientStartPointY
, fillLinearGradientEndPointX
, and fillLinearGradientEndPointY
properties.

Radial gradients also have the same set of properties, but the word Linear
is replaced with Radial
. Two additional properties related to radial gradients are fillRadialGradientStartRadius
and fillRadialGradientEndRadius
.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 25,
  y: 25,
  width: 200,
  height: 150,
  fillLinearGradientStartPoint: {
    x: 0,
    y: 0
  },
  fillLinearGradientEndPoint: {
    x: 200,
    y: 150
  },
  fillLinearGradientColorStops: [0, 'blue', 1, 'yellow'],
  stroke: "black"
});

var rectB = new Konva.Rect({
  x: 375,
  y: 25,
  width: 200,
  height: 150,
  fillLinearGradientStartPoint: {
    x: 0,
    y: 50
  },
  fillLinearGradientEndPoint: {
    x: 100,
    y: -50
  },
  fillLinearGradientColorStops: [0, 'green', 0.1, 'yellow', 0.5, 'red', 0.9, 'black'],
  stroke: "black"
});

var rectC = new Konva.Rect({
  x: 25,
  y: 200,
  width: 200,
  height: 150,
  fillRadialGradientStartRadius: 0,
  fillRadialGradientEndRadius: 220,
  fillRadialGradientColorStops: [0, 'green', 0.5, 'yellow', 0.75, 'red', 0.9, 'black'],
  stroke: "black"
});

var rectD = new Konva.Rect({
  x: 375,
  y: 200,
  width: 200,
  height: 150,
  fillRadialGradientStartRadius: 0,
  fillRadialGradientEndRadius: 150,
  fillRadialGradientStartPoint: {
    x: 100,
    y: 75
  },
  fillRadialGradientEndPoint: {
    x: 100,
    y: 75
  },
  fillRadialGradientColorStops: [0, 'blue', 0.5, 'yellow', 0.9, 'green'],
  stroke: "black"
});

layerA.add(rectA, rectB, rectC, rectD);

stage.add(layerA);

When not specified, the start and end point of a radial gradient are assumed to be 0,0
. This is why the radial gradient in the third rectangle originates from the top left corner. Also remember that the start and end points are specified relative to the shape itself.

Just like the fill, you can set a value for the stroke color and stroke width using the stroke
and strokeWidth
properties when a shape is first instantiated. You can also dynamically set both these values using the stroke()
and strokewidth()
methods.

Creating Shadows in Konva

You can apply shadows to any shapes created using Konva with the help of four different properties called shadowColor
, shadowOffset
, shadowBlur
, and shadowOpacity
. The shadowOffset
property accepts an object with x
and y
components as its value, but you can also use shadowOffsetX
and shadowOffsetY
to specify the x
and y
co-ordinates separately. You also have the option of enabling and disabling the shadows for any particular shape using the shadowEnabled
property.

You can control the opacity of the shape itself using the opacity
property. Please note that a fully transparent object will not cast any shadow. Similarly, if you have set the fill
color of a shape to transparent, only the shadow of its stroke
will be rendered on the canvas.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 25,
  y: 25,
  width: 200,
  height: 150,
  cornerRadius: 5,
  fill: "orange",
  opacity: 0.5,
  shadowColor: "black",
  shadowOffset: {
    x: -10,
    y: 10
  },
  shadowBlur: 10,
  stroke: "black"
});

var starA = new Konva.Star({
  x: 400,
  y: 200,
  numPoints: 10,
  innerRadius: 50,
  outerRadius: 150,
  fill: "transparent",
  stroke: "black",
  strokeWidth: 5,
  shadowColor: "red",
  shadowOffset: {
    x: 5,
    y: 5
  },
  shadowBlur: 0
});

layerA.add(rectA, starA);

stage.add(layerA);

Setting the shadowBlur
property to 0 makes the shadow as sharp as the original shape itself. Setting this value too high will make the shadow lose the original shape; you will only see a dark patch on the canvas.

I would like to point out that you can also create text shadows with the same set of properties once you have instantiated a Konva.Text()
object.

Applying Blend Modes

So far in the series, any overlap between shapes hid the bottom shape completely. The only way to keep the bottom shape visible was to make all the shapes over it partially transparent.

Sometimes, you might want the final result after the overlap of different shapes to follow certain rules. For example, it is possible to only show the lighter or darker color in cases where the shapes overlap.

Konva allows you to specify some values to determine how the colors of overlapping shapes should blend together using the globalCompositeOperation
property. You can read the documentation on MDN
to learn about the property and all its possible values in more detail.

In the following example, I have applied a different blend mode to each of the rectangles placed at the corner of the central rectangle.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectCenter = new Konva.Rect({
  x: 225,
  y: 125,
  width: 150,
  height: 150,
  fill: "rgb(255, 100, 0)"
});

var rectA = new Konva.Rect({
  x: 125,
  y: 25,
  width: 150,
  height: 150,
  fill: "rgb(0, 200, 100)",
  globalCompositeOperation: "lighten"
});

var rectB = new Konva.Rect({
  x: 325,
  y: 25,
  width: 150,
  height: 150,
  fill: "rgb(0, 200, 100)",
  globalCompositeOperation: "darken"
});

var rectC = new Konva.Rect({
  x: 125,
  y: 225,
  width: 150,
  height: 150,
  fill: "rgb(0, 200, 100)",
  globalCompositeOperation: "hue"
});

var rectD = new Konva.Rect({
  x: 325,
  y: 225,
  width: 150,
  height: 150,
  fill: "rgb(0, 255, 0)",
  globalCompositeOperation: "xor"
});

layerA.add(rectCenter, rectA, rectB, rectC, rectD);

stage.add(layerA);

The color of the top-left rectangle is rgb(0, 200, 100)
, and the color of the central rectangle is rgb(255, 100, 0)
. When the lighten
blend mode is applied, the rgb
components of both the colors are compared individually, and the higher values for each component are used to get the final color. In our case, the final color for the top-left corner becomes rgb(255, 200, 100)
.

When the darken
blend mode is applied, the rgb
components of both the colors are compared individually, and the lower values for each component are used to get the final color. In our case, the final color for the top-right corner becomes rgb(0, 100, 0)
.

When the hue
blend mode is applied, the luma and chroma of the bottom color are combined with the hue of the top color. This is why the final color still remains green but gets lighter. When the xor
blend mode is applied, the final color becomes transparent at all the places of overlap.

Final Thoughts

In this tutorial, we learned how to fill a shape with linear or radial gradients instead of solid colors. We also learned how to apply shadows to different shapes and make them partially transparent using the opacity
property. The final section showed you how to use blend modes in order to change the final color after two shapes overlap.

If you have any questions related to this tutorial, please let me know in the comments. The next and final tutorial of the series will teach you how to bind events to different shapes in Konva.

Nettuts+责编内容来自:Nettuts+ (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Manipulating HTML5 Canvas Using Konva: Part 4, Styling

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录