点赞 + 关注 + 收藏=学会了
本文讲解在 Fabric.js 中如何自由绘制椭圆形,如果你还不了解 Fabric.js,可以查阅 《Fabric.js从入门到精通》。
效果如下图所示
Fabric.js 在初始化画布之后,可以执行框选操作,但默认是使用矩形的方式来框选,如下图所示:
我希望使用鼠标创建椭圆的时候可以又一个椭圆的影子出来,这能让我更方便去观察当前要画的椭圆大概是什么样子。
所以我们可以先把框选时的边框和背景色设置成透明,然后再框选时监听鼠标点击、移动、松开的事件,从而绘制出一个椭圆。
详细思路步骤如下:
我将整个绘制事件拆分成上面4步,但其实第3步还是有点难度的,我们要考虑几种情况:
这4种情况我在 《Fabric.js 自由绘制矩形》 里逐一分析过,可以去看看(记得点个赞哦~)
在理清思路后,我们可以正式编码阶段。
我还是会按照1、2、3、4的步骤去编码,你在两个浏览器窗口中打开本文,一边是编码,一边是思路,对照着看可能会清晰点。
<canvas id="canvas" width="800" height="800"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script>
let canvas=null
let currentType='default'
let downPoint=null
let upPoint=null
let currentEllipse=null // 临时椭圆
// 初始化画板
function initCanvas() {
canvas=new fabric.Canvas('canvas')
canvas.on('mouse:down', canvasMouseDown) // 鼠标在画布上按下
canvas.on('mouse:move', canvasMouseMove) // 鼠标在画布上移动
canvas.on('mouse:up', canvasMouseUp) // 鼠标在画布上松开
}
// 画布操作类型切换
function typeChange(opt) {
currentType=opt
switch(opt) {
case 'default':
// 默认框选模式
canvas.selection=true
canvas.selectionColor='rgba(100, 100, 255, 0.3)'
canvas.selectionBorderColor='rgba(255, 255, 255, 0.3)'
canvas.skipTargetFind=false // 允许选中
break
case 'ellipse':
// 椭圆模式
// 将框选时,边框和背景设为透明
canvas.selectionColor='transparent'
canvas.selectionBorderColor='transparent'
canvas.skipTargetFind=true // 禁止选中
break
}
}
// 鼠标在画布上按下
function canvasMouseDown(e) {
downPoint=e.absolutePointer
if (currentType==='ellipse') {
currentEllipse=new fabric.Ellipse({
top: downPoint.y,
left: downPoint.x,
rx: 0,
ry: 0,
fill: 'transparent',
stroke: 'rgba(0, 0, 0, 0.2)'
})
canvas.add(currentEllipse)
}
}
// 鼠标在画布上移动
function canvasMouseMove(e) {
if (currentType==='ellipse' && currentEllipse) {
const currentPoint=e.absolutePointer
let rx=Math.abs(downPoint.x - currentPoint.x) / 2
let ry=Math.abs(downPoint.y - currentPoint.y) / 2
let top=currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - ry * 2
let left=currentPoint.x > downPoint.x ? downPoint.x : downPoint.x - rx * 2
// 设置椭圆尺寸和所在位置
currentEllipse.set('rx', rx)
currentEllipse.set('ry', ry)
currentEllipse.set('top', top)
currentEllipse.set('left', left)
// 刷新一下画布
canvas.requestRenderAll()
}
}
// 鼠标在画布上松开
function canvasMouseUp(e) {
upPoint=e.absolutePointer
if (currentType==='ellipse') {
// 需要判断点击时和松开时鼠标的坐标点是否相等,相等的话就不创建椭圆了
if (JSON.stringify(downPoint)===JSON.stringify(upPoint)) {
canvas.remove(currentEllipse)
} else {
// 设置椭圆样式
currentEllipse.set('stroke', '#000')
}
// 清除临时创建的椭圆
currentEllipse=null
}
}
window.onload=function() {
initCanvas()
}
</script>
复制代码
从上面的代码可以看出,主要核心部分就是 “鼠标点击时,鼠标移动时,松开鼠标后” 这几个环节。鼠标移动时,要实时监听鼠标当前的坐标,松开鼠标后就不再监听。
?Fabric.js 自由绘制椭圆 https://gitee.com/k21vin/fabricjs-demo/blob/master/demos/FreeDrawing/createEllipse.html
明:SVG 虽然也是标签,但它不是 HTML5,标题加了 HTML5 只是为了与 canvas 放到一起。
SVG 意为可缩放矢量图形(Scalable Vector Graphics),使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的,但是 SVG 没有单位的概念,它的20只是表示1的20倍,所以 SVG 绘制的图形放大或缩小都不会失真。
与其他图像比较,SVG 的优势有以下几点:
2.1、svg 标签
SVG 的代码都放到 svg 标签呢,SVG 中的标签都是闭合标签,与html中标签用法一致。svg的属性有:
eg:画一条直线,完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height:600px;">
<svg width="300" height="300">
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>
</svg>
</body>
</html>
上述 svg 设置的宽高没有带单位,此时默认是像素值,如果需要添加单位时,除了绝对单位,也可以设置相对单位。
使用语法:<svg viewBox=" x1,y1,width,height "></svg>
四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分,由上述四个参数决定。
使用 viewBox 之后,相当于svg整体大小不变,只能看到 viewBox 设置部分,视觉上被放大。
2.2、SVG 如何嵌入 HTML
SVG 的代码可以直接嵌入到 html 页面中,也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件,SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用?
2.2.1、embed 嵌入:
使用语法:<embed src="line.svg" type="image/svg+xml"></embed>
src是SVG文件路径,type 表示 embed 引入文件类型。
优点:所有浏览器都支持,并允许使用脚本。
缺点:不推荐 html4 和 html 中使用,但 html5 支持。
2.2.2、object 嵌入:
使用语法:<object data="line.svg" type="image/svg+xml"></object>
data 是 SVG 文件路径,type 表示 object 引入文件类型。
优点:所有浏览器都支持,支持 html、html4 和 html5。
缺点:不允许使用脚本。
2.2.3、iframe 嵌入:
使用语法:<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>
src是 SVG 文件路径,width、height、frameborder 设置的大小和边框。
优点:所有浏览器都支持,并允许使用脚本。
缺点:不推荐 html4 和 html 中使用,但 html5 支持。
2.2.4、html中嵌入:
svg 标签直接插入 html 内容内,与其他标签用法一致。
2.2.5、连接到svg文件:
使用 a 标签,直接链接到 SVG 文件。
使用语法:<a href="line.svg">查看SVG</a>
3.1、线 - line
使用语法:
<svg width="300" height="300" >
<line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>
使用line标签创建线条,(x1,y1)是起点,(x2,y2)是终点,stroke绘制黑线,stroke-width是线宽。
3.2、矩形 - rect
//使用语法:
<svg width="300" height="300" >
<rect
width="100" height="100" //大小设置
x="50" y="50" //可选 左上角位置,svg的左上角默认(0,0)
rx="20" ry="50" //可选 设置圆角
stroke-width="3" stroke="red" fill="pink" //绘制样式控制
></rect>
</svg>
上述参数 width、height是必填参数,x、y是可选参数,如不设置的时候,默认为(0,0),也就是svg的左上角开始绘制。rx、ry是可选参数,不设置是矩形没有圆角。fill定义填充颜色。
3.3、圆形 - circle
// 使用语法
<svg width="300" height="300" >
<circle
cx="100" cy="50" // 定义圆心 ,可选
r="40" // 圆的半径
stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色
</svg>
上述(cx,xy)定义圆心的位置,是可选参数,如果不设置默认圆心是(0,0)。r是必需参数,设置圆的半径。
3.4、椭圆 - ellipse
椭圆与圆相似,不同之处在于椭圆有不同的x和y半径,而圆两个半径是相同的。
// 使用语法
<svg width="300" height="300" >
<ellipse
rx="20" ry="100" //设置椭圆的x、y方向的半径
fill="purple" // 椭圆填充色
cx="150" cy="150" //设置椭圆的圆心 ,可选参数
></ellipse>
</svg>
上述椭圆的两个rx、ry两个方向半径是必须参数,如果rx=ry就表示是圆形,(cx,cy)是椭圆的圆心,是可选参数,如果不设置,则默认圆心为(0,0)。
3.5、折线 - polyline
// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
<!-- 绘制出一个默认填充黑色的三角形 -->
<polyline
points=" //点的集合
0 ,0, // 第一个点坐标
100,100, // 第二个点坐标
100,200 // 第三个点坐标
"
stroke="green"
></polyline>
<!-- 绘制一个台阶式的一条折线 -->
<polyline
points="0,0,50,0,50,50,100,50,100,100,150,100,150,150"
stroke="#4b27ff" fill="none"
></polyline>
</svg>
上述代码执行结果如图所示:
需要注意的是 points 中包含了多个点的坐标,但不是一个数组。
3.6、多边形 - polygon
polygon 标签用来创建不少于3个边的图形,多边形是闭合的,即所有线条连接起来。
// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
<polygon
points="
0,0, //多边形的第一点
100,100, //多边形的第二点
0,100 //多边形的第三点
"
stroke="purple"
stroke-width="1"
fill="none"
></polygon>
</svg>
polygon绘制的时候与折线有些类似,但是polygon会自动闭合,折线不会。
3.7、路径 - path
path 是SVG基本形状中最强大的一个,不仅能创建其他基本形状,还能创建更多其他形状,如贝塞尔曲线、2次曲线等。
点个关注,下篇更精彩!
圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆 x 轴和 y 轴上的半径不同,所以椭圆就是一个不规则的圆。
在绘制椭圆时, 可以通过 cx 和 cy 属性确定椭圆的圆心,rx 设置椭圆的 x 轴的半径,ry 设置 y 轴的半径。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg>
<ellipse cx="100" cy="50" rx="50" ry="30" style="fill:red;"/>
</svg>
</body>
</html>
在浏览器中的演示效果:
上述代码中,我们设置了椭圆的圆心为 (100,50),水平半径为50,垂直半径为 30。如果将 rx 和 ry 的值设置为相同的值,则会绘制一个规则的圆。
如果我们要设置椭圆的透明度,可以使用 opacity 属性,这个属性的取值范围为 0 到 1 之间的小数。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg>
<ellipse cx="100" cy="50" rx="50" ry="30" style="fill:none; stroke-width: 3; stroke:#b276be; "></ellipse>
<ellipse cx="150" cy="50" rx="50" ry="30" style="fill:#26c3df; opacity: 0.5;"></ellipse>
</svg>
</body>
</html>
在浏览器中的演示效果:
我们绘制了两个椭圆,其中左边的椭圆没有设置填充颜色,而右边的椭圆填充颜色为蓝色,透明度为 0.5。如果要改变椭圆的位置,只需要改变椭圆的圆心坐标,即 cx 和 cy 属性的值即可。
链接:https://www.9xkd.com/
*请认真填写需求信息,我们会在24小时内与您取得联系。