InkStrokeRenderingSegment InkStrokeRenderingSegment InkStrokeRenderingSegment Class

Definition

A single segment of a complete ink stroke.

A single segment consists of a starting point, an ending point, and two Bezier control points. However, for a series of segments that make up a stroke, the last point of the previous segment is the first point of the current segment. This means that only the ending point for each segment is required to represent a complete stroke.

Each stroke is a vector of InkStrokeRenderingSegment objects with the first segment identified by a single starting point and all remaining segments identified by an ending point and two Bezier control points.

public sealed class InkStrokeRenderingSegment : IInkStrokeRenderingSegmentpublic sealed class InkStrokeRenderingSegment : IInkStrokeRenderingSegmentPublic NotInheritable Class InkStrokeRenderingSegment Implements IInkStrokeRenderingSegment
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0 - for Xbox, see UWP features that aren't yet supported on Xbox)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Remarks

Set the FitToCurve property of DrawingAttributes to true if you want an ink stroke to be rendered with cubic Bezier curves. Otherwise, the stroke is rendered with straight line segments.

Note

: This class is not agile, which means that you need to consider its threading model and marshaling behavior. For more info, see Threading and Marshaling (C++/CX) and Using Windows Runtime objects in a multithreaded environment (.NET).

Examples

The function in the following example demonstrates how a cubic Bezier curve can be derived for each segment of an ink stroke (stroke) by using the bezierCurveTo method. Each curve is then rendered through the 2-D context of the canvas (ctx).


// Render all strokes using bezier curves instead of line segments.
function renderAllStrokes()
{
    statusMessage.innerText += "Render strokes as bezier curves."

    // Clear the drawing surface of existing strokes.
    inkContext.clearRect(0, 0, inkCanvas.width, inkCanvas.height);

    // Enumerate through each stroke.
    inkManager.getStrokes().forEach(
        function (stroke)
        {
            inkContext.beginPath();
            inkContext.lineWidth = strokeWidth; 
            inkContext.strokeStyle = strokeColor; 

            // Enumerate through each line segment of the stroke.
            var first = true;
            var x = stroke.getRenderingSegments().length;
            stroke.getRenderingSegments().forEach(
                function (segment)
                {
                    // Move to the starting location of the stroke.
                    if (first)
                    {
                        inkContext.moveTo(segment.position.x, segment.position.y);
                        first = false;
                    }
                    // Calculate the bezier curve for the segment.
                    else
                    {
                        inkContext.bezierCurveTo(segment.bezierControlPoint1.x, 
                                                 segment.bezierControlPoint1.y,
                                                 segment.bezierControlPoint2.x, 
                                                 segment.bezierControlPoint2.y,
                                                 segment.position.x, segment.position.y);
                    }
                }
            );

            // Draw the stroke.
            inkContext.stroke();
            inkContext.closePath();
        }
    );
}

For the complete example, see Ink App sample.

Properties

BezierControlPoint1 BezierControlPoint1 BezierControlPoint1

Gets the first control point for the Bézier curve.

public Point BezierControlPoint1 { get; }public Point BezierControlPoint1 { get; }Public ReadOnly Property BezierControlPoint1 As Point
Value
Point Point Point

The control point.

Attributes
See Also

BezierControlPoint2 BezierControlPoint2 BezierControlPoint2

Gets the second control point for the Bézier curve.

public Point BezierControlPoint2 { get; }public Point BezierControlPoint2 { get; }Public ReadOnly Property BezierControlPoint2 As Point
Value
Point Point Point

The control point.

Attributes
See Also

Position Position Position

Gets the end point of the segment.

public Point Position { get; }public Point Position { get; }Public ReadOnly Property Position As Point
Value
Point Point Point

The end point.

Attributes
See Also

Pressure Pressure Pressure

Gets the pressure of the contact on the digitizer surface.

public float Pressure { get; }public float Pressure { get; }Public ReadOnly Property Pressure As float
Value
float float float

The pressure of the contact.

Attributes
See Also

TiltX TiltX TiltX

Gets the tilt of the contact along the x axis.

public float TiltX { get; }public float TiltX { get; }Public ReadOnly Property TiltX As float
Value
float float float

The tilt along the x axis.

Attributes
See Also

TiltY TiltY TiltY

Gets the tilt of the contact along the y axis.

public float TiltY { get; }public float TiltY { get; }Public ReadOnly Property TiltY As float
Value
float float float

The tilt along the y axis.

Attributes
See Also

Twist Twist Twist

Gets the twist of the contact along the rotational axis.

public float Twist { get; }public float Twist { get; }Public ReadOnly Property Twist As float
Value
float float float

The twist of the contact along the rotational axis.

Attributes
See Also

See Also