sketch-context2d

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

sketch-context2d

★ 14 Open GitHub ↗

Javascript CanvasRenderingContext2d in Sketch

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

*DRAFT – MORE TO COME*

**COMPATIBLE WITH SKETCH 41.2**

![](https://raw.githubusercontent.com/automat/sketch-context2d/master/assets/cover-00.jpg)

## Introduction

This isn't a plugin. It´s a **node.js module and command-line tool to run js modules via [browserify](https://github.com/substack/node-browserify) in Sketch**.

Essentially it creates a javascript context with an injected canvas object which is a representation of the current selected artboard or group and exposes Sketchs drawing capabilities through the canvas 2d context. The API mirrors CanvasRenderingContext2D.

***Long story short, you can use javascript to draw things in Sketch just like you can in browser environments using canvas.***

Paths are shape-layers, text gets translated to text-layers, all still editable and styleable. Transformation, style and text-layout states are saved on a stack.

###Great, but why?

I work on visualising data on a daily basis. With a few exceptions this goes beyond developing simple visually reduced pie- or bar-charts. While there are already solutions for drawing those in Sketch, none of them are flexible enough. They are either too opinionated visually or expect a certain data format.

You shouldnt create visual-systems for data-representation in Sketch, verify them afterwards by implementing a defined style with actual data and hope it won't break. Creating those systems is also about edge-cases: What happens if the actual data isn't as interesting as expected? How can extreme values be handled? In which cases does it make sense to break the rule-set and establish a new one? Those questions should be part of the design process.

We find solutions by constantly switching between design and implementation. I think this process can be unified and happen in a shared environment, right within Sketch and using our own preferred code toolset.

### Some visual examples

![](https://raw.githubusercontent.com/automat/sketch-context2d/master/assets/sample-plots.png)
Out of context, some explorations using the same external data-set and a shared style. You can find the Sketch file and the js files for plotting the data [here](./examples/00-readme-plots/), the original data is located [here](./examples/00-readme-plots/data/data-activity-top-5.txt).

### How does it work?

![](https://raw.githubusercontent.com/automat/sketch-context2d/master/assets/scheme.jpg)
*sketch-context2d* takes your js files, browserifies them (handling your filesystem requests as well) and creates a new javascript-context right within Sketch with wrapped bindings to its layer drawing procedures.

A simple `example.js` file:

```
//you can require node modules 😎
//var favModule = require('fav-module');

function main(canvas){ //canvas, your selected artboard / group
    var ctx = canvas.getContext('2d'); //exposed drawing capabilities

var width  = canvas.width;  //artboard / group width
    var height = canvas.height; //artboard / group height

ctx.beginPath();     //begin new shape-layer
    ctx.moveTo(0,0);     //construct shape-layer
    ctx.lineTo(100,100);
    ctx.stroke();        //stroke shape-group and add to artboard / group
}

module.exports = main; //expose drawing function to sketch-context2d
```

This will create a new group within your currently selected artboard or group named `example_{timestamp}`. The visual result of your drawing function will be placed within that group. In this case a diagonal black line will appear. Every time you change the `example.js` file and rerun *sketch-context2d* (or use the `--watch` option) the aforementioned group will get updated, including its timestamp.

![](https://raw.githubusercontent.com/automat/sketch-context2d/master/assets/screencast-00.gif)
A recorded example using the `--watch` option drawing the Sketch logo in code.

## Installation

Install node.js if necessary

```
brew install node
```

Using [npm](https://www.npmjs.com/), do: (Not published yet)

```
npm install -g sketch-context2d
```

## Run

Select a target artboard or group within Sketch.

####CLI ( *To be added* )
```
$ sketch-context2d file.js
```

| Option        | Description                                   |
|---------------|-----------------------------------------------|
| --help        | Show all options                              |
| --verbose     | Log details of the process                    |
| --log-verbose | Log js script line number and columns         |
| --recreate    | Don´t update groups in place, create new ones |
| --flatten     | Flattens resulting group to image             |
| --watch       | Watch the js script passed                    |

#### Module API example

```
//do something here

//sketch-context2d options, see above
const options = {
    verbose    : false,
    verboseLog : false,
    recreate   : false,
    flatten    : false,
    watch      : false
};

//run / watch js file in Sketch
require('sketch-context2d')(['dir/file.js'],options);
```

## API-Reference

### CanvasRenderingContext2d References

https://www.w3.org/TR/2dcontext/ 
(best overview)
https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D  
(more accessible, reference for single cmd tests [here](./test/CanvasRenderingContext2d-API))

### API-Implementation Status

Around 70% is already done, mostly pixel based manipulations is missing. Everything not configurable by Sketch´s Interface is ignored (eg. miterLimit, lineDashOffset).  
[Overview here](./test/CanvasRenderingContext2d-API/SUMMARY.md)

### CanvasRenderingContext2d API Additions

Some additions necessary to the original API:

#### Global

```
//check if you are in Sketch
if(sketch){
    //do Sketch specific stuff here
}
```

#### Context

```
//Default, text-layers created via fillText/strokeText get transformed 
//to shape-groups to apply all transformations. You can't skew, apply non-uniform
//scales to text-layers
ctx.useTextLayerShapes = true;

//Prevents text-layers from being transformed to shapes. 
//They remain fully editable, scale- and rotation-transforms are ignored though
ctx.useTextLayerShapes = false;
```

#### Images

```
var image = new Image();
if(!sketch){
    //you can skip the callback in sketch-context2d, 
    //as images are loaded synchronously
    image.onload = function(){draw(canvas);};
    image.src = pathToImg;
} else {
    image.src = pathToImg;
    draw(canvas);
} 
```

sketch-context2d

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README