Handles 手柄

This plugin will enable any jCanvas rectangle or image to be resized using draggable handles on its four corners.
本插件可以启用任意的jCanvas矩形或图像用它四个角处的可拖拽手柄来调节尺寸。
Once you download and include the plugin on your page, you can add these drag handles to a rectangle by specifying the handle property with the properties of your handle.
一旦你下载并在页面引入了本插件，你就可以给矩形添加拖拽手柄了，给定（矩形）handel属性，并附加手柄的属性就可以了。
It's important to note that each drag handle is an actual jCanvas layer.
密切注意，每个拖拽手柄实际上都是一个jCanvas层。

Rectangles 矩形

The following example will draw a resizable rectangle.
下边的示例绘制了一个可调节尺寸的矩形。

// Add rectangle layer w/o drawing 添加了矩形层并输出绘制
$('canvas').addLayer({
  type: 'rectangle',
  draggable: true,
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 160, y: 150,
  width: 150, height: 80,
  // Define handle properties 定义handle属性
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  }
})
// Redraw layers to ensure handles are on top of rectangle
// 重绘层以保证手柄位于矩形之上
.drawLayers();

Resizing from a corner 从一个角处调节大小

By default, plugin resizes the rectangle from its center. However, you can easily change this behavior by setting the resizeFromCenter property to false.
默认，插件是从矩形的中心调节大小的，但你也可以很容易地改变这项行为，设置resizeFromCenter属性为false就可以了。

$('canvas').addLayer({
  type: 'rectangle',
  draggable: true,
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 160, y: 150,
  width: 150, height: 80,
  handle: {
    type: 'rectangle',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    width: 20, height: 20,
    cornerRadius: 3
  },
  resizeFromCenter: false
})
.drawLayers();

Constraining proportions 约束比例

You can also constrain the original proportions of the shape using the constrainProportions property.
你也可以使用constrainProportions属性约束图形的原始比例。

$('canvas').addLayer({
  type: 'rectangle',
  draggable: true,
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 160, y: 150,
  width: 150, height: 80,
  constrainProportions: true,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  },
})
.drawLayers();

Of course, this constraining also works when resizing from a corner (that is, when resizeFromCenter is false).
当然，此项约束在从一个角处调节时也适用（也就是当resizeFromCenter=false时）。

$('canvas').addLayer({
  type: 'rectangle',
  draggable: true,
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 160, y: 150,
  width: 150, height: 80,
  resizeFromCenter: false,
  constrainProportions: true,
  handle: {
    type: 'rectangle',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    width: 20, height: 20,
    cornerRadius: 3
  },
})
.drawLayers();

The aspect ratio to which the image is constrained is determined by the layer's initial width and height attributes. However, you can also define an explicit aspect ratio for the layer using the aspectRatio property.
图像约束的宽高比，取决于层的初始width和height属性。但你也可以使用aspectRatio属性，来给层定义一个明确的宽高比。

$('canvas').addLayer({
  type: 'rectangle',
  draggable: true,
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 160, y: 150,
  width: 150, height: 80,
  constrainProportions: true,
  // Constrain the rectangle to a square shape 约束矩形为一个正方形
  aspectRatio: 1,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  },
})
.drawLayers();

Note that the layer's aspectRatio is disregarded when constrainProportions is false.
注意，层的aspectRatio属性在constrainProportions=false时被忽略。

Handle placement 手柄定位

The plugin allows for handles to be placed on either the corners of the layer, or on its sides. This can be especially useful for shapes such as ellipses, which have no actual corners but whose sides extend to the ellipse's defined width and height.
插件允许手柄位于层的角落，或边缘处。这点对于诸如椭圆等图形尤其有用。这些图形没有实际的角，但角（组成）的边缘，延伸向椭圆已定义的宽高。
To specify where handles are placed, specify the handlePlacement property with any of the following values:'corners', 'sides', or 'both'. The default value is'corners'.
要指定手柄所处的位置，请指定handlePlacement属性，可用下边值中的任意一个：corners，sides或both。默认值是corners。

$('canvas').addLayer({
  type: 'rectangle',
  draggable: true,
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 160, y: 150,
  width: 150, height: 80,
  // Place a handle at each side 在每个边缘上放一个手柄
  handlePlacement: 'sides',
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  },
})
.drawLayers();

$('canvas').addLayer({
  type: 'rectangle',
  draggable: true,
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 160, y: 150,
  width: 150, height: 80,
  // Place a handle at each side and each corner 在每个边缘及角上放一个手柄
  handlePlacement: 'both',
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  },
})
.drawLayers();

Ellipses 椭圆

You can also add handles to ellipse layers in the same manner, though this is more practical using the handlePlacement property.
你也可以用同样的方法给椭圆层添加手柄，尽管使用handlePlacement属性更加实用。

$('canvas').addLayer({
  type: 'ellipse',
  draggable: true,
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 160, y: 150,
  width: 150, height: 80,
  // Place a handle at each side and each corner 在每个角每个边上都放置手柄
  handlePlacement: 'both',
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  },
})
.drawLayers();

Images 图像

You can also add handles to image layers in the same manner. However, note that in order for this to work properly, you must specify the width and height properties.
你也可以用同样方法给图像添加手柄，但注意，为了使它正常运行，你必须指定width和height属性。

// Draw a resizable image 绘制一个可调节大小的图像
$('canvas').addLayer({
  type: 'image',
  draggable: true,
  source: 'images/fish.jpg',
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 180, y: 150,
  width: 200, height: 125,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  }
})
.drawLayers();

Lines 直线

You can also add handles to line layers in the same manner. 你也可以用同样方法给直线层添加手柄

$('canvas').addLayer({
  type: 'line',
  draggable: true,
  strokeStyle: '#c33',
  strokeWidth: 2,
  rounded: true,
  x1: 100, y1: 50,
  x2: 150, y2: 150,
  x3: 200, y3: 100,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  }
})
.drawLayers();

Curves 曲线

You can also add handles to quadratic or Bézier curve layers.
你也可以给二次或贝塞尔曲线层添加手柄

$('canvas').addLayer({
  type: 'quadratic',
  draggable: true,
  strokeStyle: '#c33',
  strokeWidth: 2,
  rounded: true,
  x1: 50, y1: 50,
  cx1: 175, cy1: 75,
  x2: 200, y2: 200,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  }
})
.drawLayers();

$('canvas').addLayer({
  type: 'bezier',
  draggable: true,
  strokeStyle: '#c33',
  strokeWidth: 2,
  rounded: true,
  x1: 100, y1: 150,
  cx1: 50, cy1: 50,
  cx2: 250, cy2: 50,
  x2: 200, y2: 150,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  }
})
.drawLayers();

This plugin also allows you to add visual guides to your curves. A guide in jCanvas terminology is simply a line connected from a control point to an anchor point. You can add guides to your curve layer using the guide property.
本插件也允许你给曲线添加可视化向导，jCanvas技术上的向导，是连接了一个控制点到一个锚点的一条简单的直线。你可以使用guide属性向你的曲线层添加向导。

$('canvas').addLayer({
  type: 'quadratic',
  draggable: true,
  strokeStyle: '#c33',
  strokeWidth: 2,
  rounded: true,
  x1: 50, y1: 50,
  cx1: 175, cy1: 75,
  x2: 200, y2: 200,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  },
  // Define guide properties 定义guide属性
  guide: {
    strokeStyle: '#c33',
    strokeWidth: 1
  }
})
.drawLayers();

$('canvas').addLayer({
  type: 'bezier',
  draggable: true,
  strokeStyle: '#c33',
  strokeWidth: 2,
  rounded: true,
  x1: 100, y1: 150,
  cx1: 50, cy1: 50,
  cx2: 250, cy2: 50,
  x2: 200, y2: 150,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  },
  guide: {
    strokeStyle: '#c33',
    strokeWidth: 1
  }
})
.drawLayers();

Events 事件

The plugin also adds the following custom events: handlestart,handlemove, handlestop
插件也添加了下边的自定义事件：handlestart，handlemove，handlestop

// Add rectangle layer w/o drawing 添加矩形层并输入绘制
$('canvas').addLayer({
  type: 'rectangle',
  draggable: true,
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 160, y: 150,
  width: 150, height: 80,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  },
  handlestart: function(layer) {
    // code to run when resizing starts 当开始调节大小时运行代码
  },
  handlemove: function(layer) {
    // code to run while resizing 当调节大小时运行代码
  },
  handlestop: function(layer) {
    // code to run while resizing stops 当结束调节大小时运行代码
  }
})
.drawLayers();