# Zjbcool-canvas

Canvas插件提供了一系列可以在Verge3D场景中绘制图形的拼图。

在绘制之前,首先需要使用原生的HTML分类下的create canvas拼图新建一个空的canvas画布,然后使用原生的Mateials分类下的replace texture拼图将其指定到材质上。接下来就可以使用插件进行绘制了。

根据功能该类拼图可以分为6组:

mark

# get context

新建画布后,需要通过get context拼图获取该canvas画布的上下文,进入绘图模式(获取画笔),然后才能使用插件的其它拼图进行绘制。

# set needsUpdate

当画布内容发生改变时,Verge3D并不知道何时需要更新材质,因此需要通过该拼图发出更新通知。设置值为true,即更新材质,否则为不更新。默认为true。

# drawing assistant

绘图助手提供了在三维环境下绘制二维图形时需要的辅助。

grid网格可以在画布上显示标尺和网格。

info可以在鼠标旁边显示光标所在的坐标。

该拼图还会返回鼠标在画布上的位置信息,这对于实现实时绘图功能非常有用。位置信息可以通过get coord拼图获得。

# get coord

获取由drawing assistant生成的鼠标在画布上的位置信息。

# save canvas

保存绘制后的canvas画布,支持保存为jpg/png格式。可以使用原生的HTML分类下download file拼图下载图片。

mark

# path method

该拼图提供了一组绘制路径的方法。在画布上绘制图形首先需要绘制路径,然后对路径进行描边或填充。

在绘制一条新的路径时,首先需要用到begin path方法,相应的,在结束时要使用close path方法。

add path方法可以将一条路径合并到另一条路径之下。

move to方法可以将画笔移动到画布的指定位置(x,y)。

line to方法是从画笔位置到目标位置绘制直线。

bezierCurveTo方法是绘制三次贝赛尔曲线路径的方法。 该方法需要3个点。 第1、2个点是控制点,第3个点是结束点。起始点是当前路径的最后一个点,可以通过moveTo方法进行修改。

quadraticCurveTo方法是绘制二次贝塞尔曲线路径的方法。它需要2个点。 第一个点是控制点,第二个点是终点。 起始点是当前路径的最后一个点,可以使用 moveTo方法进行修改。

arc方法是绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置,半径为 r ,按顺时针方向从 startAngle 开始绘制,到 endAngle 结束。

arcTo方法根据控制点和半径绘制圆弧路径,使用当前的描点(前一个moveTo或lineTo等方法的结束点)。根据当前描点与给定的控制点1连接的直线,和控制点1与控制点2连接的直线,作为使用指定半径的圆的切线,画出两条切线之间的弧线路径。

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/arcTo (opens new window)

ellipse方法是绘制椭圆路径的方法。椭圆的圆心在(x,y)位置,半径分别是radiusX 和 radiusY ,按照顺时针的方向,从 startAngle 开始绘制,到 endAngle 结束。

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/ellipse (opens new window)

rect方法是绘制矩形路径的方法,矩形的起点位置是 (x, y) ,尺寸为 width 和 height。

# custom path

该拼图提供一组复合路径:圆形、圆角矩形、箭头。

# create path2d

创建一个新的Path2d对象。

# is point in

判断一个点是否在路径或描边内。

mark

# set prop

该拼图用于为画布指定样式,包括填充色、描边色、字体、线型、全局透明度、阴影等。

# set line dash

设置虚线样式。它的参数是一个列表(数组),一组描述交替绘制线段和间距(坐标空间单位)长度的数字。

# create pattern

从指定图片创建图案。它可以用于填充色样式。

# create gradient

创建渐变色,包括线性的径向两方式。它可以用于填充色样式。

# add color stop

为渐变终点设置颜色。

mark

# draw path

绘制路径的方法,包括填充、描边、裁剪路径。

# draw rect

绘制矩形的方法,包括填充、描边、清除。

# draw text

绘制文字的方法,包括填充和描边。

mark

# load image

从本地或远程服务器加载图片。通过loaded image接收加载的图片。

# loaded image

返回通过load image加载的图片。

# draw image

将图片绘制到画布。

# get image data

获取图片数据。返回一个ImageData对象。

# put image data

将一个ImageData对象绘制到画布。

mark

# state

保存和恢复当前画布的绘制状态。绘制状态有下面部分组成:

  • 当前的变换矩阵。
  • 当前的剪切区域。
  • 当前的虚线列表。
  • 以下属性当前的值: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.

# transform

画布的变换操作,包括移动、旋转和缩放。注意,canvas画布中变换不是针对图形,而针对当前状态下的画布。所以任何变换操作的原点都是画布左上角{x:0, y:0}的位置。

如果要在某个图形的中心点进行变换,会稍微有些复杂。需要先保存当前状态,然后移动画笔到图形的中心点位置,先变换画布,再绘制图形,最后再将画笔移回,并恢复画布状态。

# transform pattern

变换图案。

上次更新: 2021-4-26 1:03:39 ├F10: PM┤