vue 画布插件_一个Vue.js插件，用于使用EaselJS控制HTML5画布-CSDN博客

vue 画布插件

vue-easeljs (vue-easeljs)

A Vue.js plugin to control an HTML5 canvas using EaselJS.

一个Vue.js插件，用于使用EaselJS控制HTML5画布。

入门 (Getting Started)

安装vue-easeljs (Install vue-easeljs)

On the command line:

在命令行上：

npm install vue-easeljs --save

In app.js:

在app.js中：

Vue.use(require('vue-easeljs'));

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

在您的Vue.js代码中，以easel-canvas组件开始。其他组件也位于其中。

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>

See Live Demo 观看现场演示

组件 (Components)

画架位图 (easel-bitmap)

Show a static image.

显示静态图像。

Attributes:

属性：

align - array, controls what point of the image the x and y refer to. Default: ['top', 'left'].
align-array，控制x和y指向图像的哪个点。默认值：['top'，'left']。
alpha - 0 to 1, controls the opacity of the image. Default: 1, completely opaque.
alpha-0至1，控制图像的不透明度。默认值：1，完全不透明。
flip - 'horizontal'|'vertical'|'both'|'', flips the image.
flip-'horizontal'|'vertical'|'both'|''，翻转图像。
image - relative or absolute URL to an image file. Required.
image-图像文件的相对或绝对URL。需要。
rotation - degrees, rotates the image. Default: 0.
rotation-度，旋转图像。默认值：0
scale - number, resizes the image. Default: 1.
scale-数字，调整图像大小。默认值：1。
shadow - array, cast an image-shaped shadow. Format: [color, xOffset, yOffset, amountOfBluriness]. Default: null.
shadow-数组，投射图像形状的阴影。格式：[颜色，xOffset，yOffset，amountOfBluriness]。默认值：null。
x - number, horizontal position based on the origin of the parent component. Default: 0.
x-数字，基于父组件原点的水平位置。默认值：0
y - number, vertical position based on the origin of the parent component. Default: 0.
y-数字，基于父组件原点的垂直位置。默认值：0

Example:

例：

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

See Live Demo 观看现场演示

画架画布 (easel-canvas)

Give the vue-easeljs components a place to live.

给vue-easeljs组件一个居住的地方。

Attributes:

属性：

anti-alias: boolean, whether or not edges should be smoothed on scaled images. Default: true.
抗锯齿：布尔值，是否应在缩放的图像上对边缘进行平滑处理。默认值：true。
height: number, the pixel height of the canvas on the page. Default: 300.
height：数字，页面上画布的像素高度。默认值：300。
width: number, the pixel width of the canvas on the page. Default: 150.
width：数字，页面上画布的像素宽度。默认值：150

Example:

例：

<easel-canvas width="500" height="100">
    <easel-shape
        form="rect"
        :dimensions="[500,100]"
        :x="0"
        :y="0"
        fill="#CCCCFF"
    >
    </easel-shape>
    <eas