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

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-'horizo​​ntal'|'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>
    <easel-text 
        text&#