InkStrokeRenderingSegment InkStrokeRenderingSegment InkStrokeRenderingSegment InkStrokeRenderingSegment Class

Definition

public : sealed class InkStrokeRenderingSegment : IInkStrokeRenderingSegmentpublic sealed class InkStrokeRenderingSegment : IInkStrokeRenderingSegmentPublic NotInheritable Class InkStrokeRenderingSegment Implements IInkStrokeRenderingSegment// You can use this class in JavaScript.

Attributes

ContractVersionAttribute DualApiPartitionAttribute MarshalingBehaviorAttribute

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.

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.

public : Point BezierControlPoint1 { get; }public Point BezierControlPoint1 { get; }Public ReadOnly Property BezierControlPoint1 As Point// You can use this property in JavaScript.

public : Point BezierControlPoint2 { get; }public Point BezierControlPoint2 { get; }Public ReadOnly Property BezierControlPoint2 As Point// You can use this property in JavaScript.

public : Point Position { get; }public Point Position { get; }Public ReadOnly Property Position As Point// You can use this property in JavaScript.

public : float Pressure { get; }public float Pressure { get; }Public ReadOnly Property Pressure As float// You can use this property in JavaScript.

public : float TiltX { get; }public float TiltX { get; }Public ReadOnly Property TiltX As float// You can use this property in JavaScript.

public : float TiltY { get; }public float TiltY { get; }Public ReadOnly Property TiltY As float// You can use this property in JavaScript.

public : float Twist { get; }public float Twist { get; }Public ReadOnly Property Twist As float// You can use this property in JavaScript.

See Also

• bezierCurveTo
• Pen and stylus interactions
• Ink sample
• Simple ink sample
• Complex ink sample