<commit_before># vue-easeljs
A Vue.js plugin to control an HTML5 canvas using EaselJS

# Thanks

Thanks go to:

* gskinner - creator of <a href="http://www.createjs.com/easeljs">EaselJS</a>
* <NAME> - writer of <a href="https://alligator.io/vuejs/custom-component-renderers/">this helpful tutorial</a>
* JPhilipp - creator of <a href="https://opengameart.org/content/700-sprites">these sprites</a> used for testing and demos, and
* jez s - who photographed <a href="https://commons.wikimedia.org/wiki/File:Entrance_to_Gulfstream_Park,_at_Hallandale,_Florida,_the_%27track_by_the_sea.%27_One_of_the_nation%27s_most_scenic_race_courses..jpg">this old postcard</a> used for testing and demos

# Getting Started

## Install vue-easeljs

On the command line:

```
npm install vue-easeljs --save
```

In app.js:

```
require('vue-easeljs');
```

In your Vue.js code start with an `easel-canvas` component. Other components 
reside within it.

The earliest components are hidden by later components whenever they overlap.

```
<easel-canvas width="400" height="300">
    <easel-shape
        :x="200"
        :y="150"
        form="circle"
        fill="blue"
        :dimensions="20"
        :align="['center','center']"
    >
    </easel-shape>
</easel-canvas>
```

# Components

## easel-bitmap

Show a static image.

Attributes:
* align - array, controls what point of the image the x and y refer to. Default: ['center', 'center'].
* alpha - 0 to 1, controls the opacity of the image. Default: 1, completely opaque.
* flip - 'horizontal'|'vertical'|'both'|'', flips the image.
* image - relative or absolute URL to an image file. Required.
* rotation - degrees, rotates the image. Default: 0.
* scale - number, resizes the image. Default: 1.
* shadow - array, cast an image-shaped shadow. Format: [color, xOffset, yOffset, amountOfBluriness]. Default: null.
* x - number, horizontal position based on the origin of the parent component. Required.
* y - number, vertical position based on the origin of the parent component. Required.

Example:

```
<easel-bitmap
    image="/images/awesome-background.jpg"
    :x="0"
    :y="0"
    :align="['left','top']"
>
</easel-bitmap>
```

## easel-canvas

Give the vue-easeljs components a place to live.

Attributes:
* anti-alias: boolean, whether or not edges should be smoothed on scaled images. Default: true.
* height: number, the pixel height of the canvas on the page. Default: 300.
* width: number, the pixel width of the canvas on the page. Default 150.

Example:

```
<easel-canvas>
    <easel-text 
        text="This is so easy!"
        :x="10"
        :y="10"
        :align="['left', 'alphabetical']"
    >
    </easel-text>
</easel-canvas>
```

## easel-container

Group other vue-easel components together and manipulate them as one.

Attributes:
* alpha - 0 to 1, controls the opacity of the container. Default: 1, completely opaque.
* flip - 'horizontal'|'vertical'|'both'|'', flips the container.
* rotation - degrees, rotates the container. Default: 0.
* scale - number, resizes the container. Default: 1.
* shadow - array, cast a shadow of all contained components. Format: [color, xOffset, yOffset, amountOfBluriness]. Default: null.
* x - number, horizontal position based on the origin of the parent component. Required.
* y - number, vertical position based on the origin of the parent component. Required.

Example:

```
<easel-container>
    <easel-bitmap
        :x="0"<commit_msg>scale doesn't work<commit_after># vue-easeljs
A Vue.js plugin to control an HTML5 canvas using EaselJS

# Thanks

Thanks go to:

* gskinner - creator of <a href="http://www.createjs.com/easeljs">EaselJS</a>
* <NAME> - writer of <a href="https://alligator.io/vuejs/custom-component-renderers/">this helpful tutorial</a>
* JPhilipp - creator of <a href="https://opengameart.org/content/700-sprites">these sprites</a> used for testing and demos, and
* jez s - who photographed <a href="https://commons.wikimedia.org/wiki/File:Entrance_to_Gulfstream_Park,_at_Hallandale,_Florida,_the_%27track_by_the_sea.%27_One_of_the_nation%27s_most_scenic_race_courses..jpg">this old postcard</a> used for testing and demos

# Getting Started

## Install vue-easeljs

On the command line:

```
npm install vue-easeljs --save
```

In app.js:

```
require('vue-easeljs');
```

In your Vue.js code start with an `easel-canvas` component. Other components 
reside within it.

The earliest components are hidden by later components whenever they overlap.

```
<easel-canvas width="400" height="300">
    <easel-shape
        :x="200"
        :y="150"
        form="circle"
        fill="blue"
        :dimensions="20"
        :align="['center','center']"
    >
    </easel-shape>
</easel-canvas>
```

# Components

## easel-bitmap

Show a static image.

Attributes:
* align - array, controls what point of the image the x and y refer to. Default: ['center', 'center'].
* alpha - 0 to 1, controls the opacity of the image. Default: 1, completely opaque.
* flip - 'horizontal'|'vertical'|'both'|'', flips the image.
* image - relative or absolute URL to an image file. Required.
* rotation - degrees, rotates the image. Default: 0.
* scale - number, resizes the image. Default: 1.
* shadow - array, cast an image-shaped shadow. Format: [color, xOffset, yOffset, amountOfBluriness]. Default: null.
* x - number, horizontal position based on the origin of the parent component. Required.
* y - number, vertical position based on the origin of the parent component. Required.

Example:

```
<easel-bitmap
    image="/images/awesome-background.jpg"
    :x="0"
    :y="0"
    :align="['left','top']"
>
</easel-bitmap>
```

## easel-canvas

Give the vue-easeljs components a place to live.

Attributes:
* anti-alias: boolean, whether or not edges should be smoothed on scaled images. Default: true.
* height: number, the pixel height of the canvas on the page. Default: 300.
* width: number, the pixel width of the canvas on the page. Default 150.

Example:

```
<easel-canvas>
    <easel-text 
        text="This is so easy!"
        :x="10"
        :y="10"
        :align="['left', 'alphabetical']"
    >
    </easel-text>
</easel-canvas>
```

## easel-container

Group other vue-easel components together and manipulate them as one.

Attributes:
* alpha - 0 to 1, controls the opacity of the container. Default: 1, completely opaque.
* flip - 'horizontal'|'vertical'|'both'|'', flips the container.
* rotation - degrees, rotates the container. Default: 0.
* shadow - array, cast a shadow of all contained components. Format: [color, xOffset, yOffset, amountOfBluriness]. Default: null.
* x - number, horizontal position based on the origin of the parent component. Required.
* y - number, vertical position based on the origin of the parent component. Required.

Note: scale is not available.

Example:

```
<easel-container
    :flip="horizontal"
>
    <easel-bitmap
        :x="0"
{'fraction_non_alphanumeric': 0.12911172293870454, 'fraction_numerical': 0.013476307781480944, 'mean_word_length': 3.708049113233288, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 43, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '388959', 'n_tokens_mistral': 2347, 'n_tokens_neox': 2181, 'n_words': 744}