Skip to main content

图像

new Konva.Image(config)

图像构造函数

参数​

名称类型描述
configObject
imageImage
crop（可选）Object
fill（可选）String填充颜色
fillPatternImage（可选）Image填充图案图像
fillPatternX（可选）Number
fillPatternY（可选）Number
fillPatternOffset（可选）Object包含 x 和 y 分量的对象
fillPatternOffsetX（可选）Number
fillPatternOffsetY（可选）Number
fillPatternScale（可选）Object包含 x 和 y 分量的对象
fillPatternScaleX（可选）Number
fillPatternScaleY（可选）Number
fillPatternRotation（可选）Number
fillPatternRepeat（可选）String可以是 "repeat"、"repeat-x"、"repeat-y" 或 "no-repeat"。默认值为 "no-repeat"
fillLinearGradientStartPoint（可选）Object包含 x 和 y 分量的对象
fillLinearGradientStartPointX（可选）Number
fillLinearGradientStartPointY（可选）Number
fillLinearGradientEndPoint（可选）Object包含 x 和 y 分量的对象
fillLinearGradientEndPointX（可选）Number
fillLinearGradientEndPointY（可选）Number
fillLinearGradientColorStops（可选）Array颜色停止点数组
fillRadialGradientStartPoint（可选）Object包含 x 和 y 分量的对象
fillRadialGradientStartPointX（可选）Number
fillRadialGradientStartPointY（可选）Number
fillRadialGradientEndPoint（可选）Object包含 x 和 y 分量的对象
fillRadialGradientEndPointX（可选）Number
fillRadialGradientEndPointY（可选）Number
fillRadialGradientStartRadius（可选）Number
fillRadialGradientEndRadius（可选）Number
fillRadialGradientColorStops（可选）Array颜色停止点数组
fillEnabled（可选）Boolean启用或禁用填充的标志。默认值为 true
fillPriority（可选）String可以是 color、linear-gradient、radial-graident 或 pattern。默认值为 color。fillPriority 属性可以非常方便地在不同填充类型之间切换。例如，如果你想在填充颜色样式和填充图案样式之间切换，只需设置 fill 属性和 fillPattern 属性，然后使用 setFillPriority('color') 以颜色填充来渲染图形，或使用 setFillPriority('pattern') 以填充图案配置来渲染图形
stroke（可选）String描边颜色
strokeWidth（可选）Number描边宽度
fillAfterStrokeEnabled（可选）Boolean是否在描边之后绘制填充？默认值为 false。
hitStrokeWidth（可选）Number命中画布上的描边大小。默认值为 "auto"，等于 strokeWidth
strokeHitEnabled（可选）Boolean启用或禁用描边命中区域的标志。默认值为 true
perfectDrawEnabled（可选）Boolean启用或禁用缓冲画布的标志。默认值为 true
shadowForStrokeEnabled（可选）Boolean启用或禁用描边阴影的标志。默认值为 true
strokeScaleEnabled（可选）Boolean启用或禁用描边缩放的标志。默认值为 true
strokeEnabled（可选）Boolean启用或禁用描边的标志。默认值为 true
lineJoin（可选）String可以是 miter、round 或 bevel。默认值为 miter
lineCap（可选）String可以是 butt、round 或 square。默认值为 butt
shadowColor（可选）String
shadowBlur（可选）Number
shadowOffset（可选）Object包含 x 和 y 分量的对象
shadowOffsetX（可选）Number
shadowOffsetY（可选）Number
shadowOpacity（可选）Number阴影不透明度。可以是 0 到 1 之间的任意实数
shadowEnabled（可选）Boolean启用或禁用阴影的标志。默认值为 true
dash（可选）Array
dashEnabled（可选）Boolean启用或禁用 dashArray 的标志。默认值为 true
x（可选）Number
y（可选）Number
width（可选）Number
height（可选）Number
visible（可选）Boolean
listening（可选）Boolean节点是否监听事件
id（可选）String唯一 ID
name（可选）String非唯一名称
opacity（可选）Number确定节点不透明度。可以是 0 到 1 之间的任意数字
scale（可选）Object设置缩放
scaleX（可选）Number设置 x 缩放
scaleY（可选）Number设置 y 缩放
rotation（可选）Number以度为单位的旋转角度
offset（可选）Object相对于中心点和旋转点的偏移
offsetX（可选）Number设置 x 偏移
offsetY（可选）Number设置 y 偏移
draggable（可选）Boolean使节点可拖动。当舞台可拖动时，你可以拖动舞台的任意部分来拖放整个舞台
dragDistance（可选）Number
dragBoundFunc（可选）function

继承自： Konva.Shape

自有方法​

Image.fromURL(url, callback, onError)​

从给定的 URL 加载图像并创建 Konva.Image 实例

参数：

  • url（String）：图像源
  • callback（function）：第一个参数为 Konva.Image 实例
  • onError（function）：可选的错误处理程序

示例：

Konva.Image.fromURL(imageURL, function(image){
   // image is Konva.Image instance
   layer.add(image);
 });

cornerRadius(cornerRadius)​

获取／设置圆角半径

参数：

  • cornerRadius（Number）

返回值： Number

示例：

// get corner radius
var cornerRadius = image.cornerRadius();

// set corner radius
image.cornerRadius(10);

// set different corner radius values
// top-left, top-right, bottom-right, bottom-left
image.cornerRadius([0, 10, 20, 30]);

image(image)​

获取／设置图像源。它可以是图像、画布或视频元素

参数：

  • image（Object）：源

返回值： Object

示例：

// get value
var image = shape.image();

// set value
shape.image(img);

crop(crop)​

获取／设置裁剪区域

参数：

  • crop（Object）
  • crop.x（Number）
  • crop.y（Number）
  • crop.width（Number）
  • crop.height（Number）

返回值： Object

示例：

// get crop
var crop = image.crop();

// set crop
image.crop({
  x: 20,
  y: 20,
  width: 20,
  height: 20
});

cropX(x)​

获取／设置裁剪区域的 x 坐标

参数：

  • x（Number）

返回值： Number

示例：

// get crop x
var cropX = image.cropX();

// set crop x
image.cropX(20);

cropY(y)​

获取／设置裁剪区域的 y 坐标

参数：

  • y（Number）

返回值： Number

示例：

// get crop y
var cropY = image.cropY();

// set crop y
image.cropY(20);

cropWidth(width)​

获取／设置裁剪区域的宽度

参数：

  • width（Number）

返回值： Number

示例：

// get crop width
var cropWidth = image.cropWidth();

// set crop width
image.cropWidth(20);

cropHeight(height)​

获取／设置裁剪区域的高度

参数：

  • height（Number）

返回值： Number

示例：

// get crop height
var cropHeight = image.cropHeight();

// set crop height
image.cropHeight(20);

继承的方法​

Konva.Image 还拥有其父类的所有方法。下面的每个链接都会打开定义该方法的类中的完整方法文档。

来自 Konva.Shape​

来自 Konva.Node​