mkloubert / nativescript-bitmap-factory

A NativeScript module for creating and manipulating bitmap images.
MIT License
22 stars 21 forks source link

Styling lines #34

Closed mm-spiio closed 4 years ago

mm-spiio commented 4 years ago

Hi there,

Is there a way to style a line? The only thing i could find is just the color of the line, but what about width and other properties one could set via CSS? is there any way?

/Manuel

mm-spiio commented 4 years ago

For everyone here, the solution is the following

In BitmapFactory.common.js pass a parameter (e.g. strokeWidth) to the drawingMethod of choice. In my case drawline method looks like this:

bitmapClass.prototype.drawLine = function(start, end, color, **strokeWidth**) {
        start = toPoint2D(start);
        end = toPoint2D(end);
        color = toARGB(color);

        this._drawLine(start, end, color, **strokeWidth**);
        return this;
    };

BitmapFactory.ios.js

iOSImage.prototype._drawLine = function(start, end, color, **strokeWidth**) {
    color = this.__toIOSColor(color);

    this.__onImageContext(function(context, tag, oldImage) {
        CGContextSetRGBStrokeColor(context,
                                   color.r, color.g, color.b, color.a);

        CGContextSetLineWidth(context, **strokeWidth || 1.0**);

        CGContextMoveToPoint(context, start.x, start.y);
        CGContextAddLineToPoint(context,
                                end.x, end.y);

        CGContextStrokePath(context);
    });
};

BitmapFactory.android.js

AndroidBitmap.prototype._drawLine = function(start, end, color, **strokeWidth**) {
    this.__canvas.drawLine(start.x, start.y,
                           end.x, end.y,
                           this.__createPaint(color, **strokeWidth**));
};

AndroidBitmap.prototype.__createPaint = function(color, strokeWidth) {
    var paint = new android.graphics.Paint();
    **if(strokeWidth) paint.setStrokeWidth(strokeWidth);**
    if (!TypeUtils.isNullOrUndefined(color)) {
        paint.setARGB(color.a, color.r, color.g, color.b);
    }

    return paint;
};

index.d.ts

Update the methods definition you want

drawLine(start: IPoint2D | string, end: IPoint2D | string, color?: string | number | IArgb, strokeWidth?: string | number): IBitmap;

If / when i have time I'd make a pull request.

or you can add this https://github.com/mm-spiio/nativescript-bitmap-factory/tarball/master