Fabric.js 自由繪制橢圓 - 掘金

文簡(jiǎn)介

點(diǎn)贊 + 關(guān)注 + 收藏=學(xué)會(huì)了

本文講解在 Fabric.js 中如何自由繪制橢圓形，如果你還不了解 Fabric.js，可以查閱《Fabric.js從入門到精通》。

效果如下圖所示

思路

Fabric.js 在初始化畫(huà)布之后，可以執(zhí)行框選操作，但默認(rèn)是使用矩形的方式來(lái)框選，如下圖所示：

我希望使用鼠標(biāo)創(chuàng)建橢圓的時(shí)候可以又一個(gè)橢圓的影子出來(lái)，這能讓我更方便去觀察當(dāng)前要畫(huà)的橢圓大概是什么樣子。

所以我們可以先把框選時(shí)的邊框和背景色設(shè)置成透明，然后再框選時(shí)監(jiān)聽(tīng)鼠標(biāo)點(diǎn)擊、移動(dòng)、松開(kāi)的事件，從而繪制出一個(gè)橢圓。

詳細(xì)思路步驟如下：

將框選時(shí)邊框和背景設(shè)為透明
鼠標(biāo)點(diǎn)擊時(shí)創(chuàng)建橢圓
鼠標(biāo)移動(dòng)時(shí)修改橢圓尺寸
鼠標(biāo)松開(kāi)時(shí)生成正式的橢圓

我將整個(gè)繪制事件拆分成上面4步，但其實(shí)第3步還是有點(diǎn)難度的，我們要考慮幾種情況：

點(diǎn)擊時(shí)的坐標(biāo)在移動(dòng)時(shí)的左下方
點(diǎn)擊時(shí)的坐標(biāo)在移動(dòng)時(shí)的左上方
點(diǎn)擊時(shí)的坐標(biāo)在移動(dòng)時(shí)的右上方
點(diǎn)擊時(shí)的坐標(biāo)在移動(dòng)時(shí)的右下方

這4種情況我在《Fabric.js 自由繪制矩形》里逐一分析過(guò)，可以去看看（記得點(diǎn)個(gè)贊哦~）

編碼

在理清思路后，我們可以正式編碼階段。

我還是會(huì)按照1、2、3、4的步驟去編碼，你在兩個(gè)瀏覽器窗口中打開(kāi)本文，一邊是編碼，一邊是思路，對(duì)照著看可能會(huì)清晰點(diǎn)。

<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 // 臨時(shí)橢圓

  // 初始化畫(huà)板
  function initCanvas() {
    canvas=new fabric.Canvas('canvas')

    canvas.on('mouse:down', canvasMouseDown)   // 鼠標(biāo)在畫(huà)布上按下
    canvas.on('mouse:move', canvasMouseMove)   // 鼠標(biāo)在畫(huà)布上移動(dòng)
    canvas.on('mouse:up', canvasMouseUp)       // 鼠標(biāo)在畫(huà)布上松開(kāi)
  }

  // 畫(huà)布操作類型切換
  function typeChange(opt) {
    currentType=opt
    switch(opt) {
      case 'default':
        // 默認(rèn)框選模式
        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':
        // 橢圓模式
        // 將框選時(shí)，邊框和背景設(shè)為透明
        canvas.selectionColor='transparent'
        canvas.selectionBorderColor='transparent'
        canvas.skipTargetFind=true // 禁止選中
        break
    }
  }

  // 鼠標(biāo)在畫(huà)布上按下
  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)
    }
  }

  // 鼠標(biāo)在畫(huà)布上移動(dòng)
  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

      // 設(shè)置橢圓尺寸和所在位置
      currentEllipse.set('rx', rx)
      currentEllipse.set('ry', ry)
      currentEllipse.set('top', top)
      currentEllipse.set('left', left)
      // 刷新一下畫(huà)布
      canvas.requestRenderAll()
    }
  }

  // 鼠標(biāo)在畫(huà)布上松開(kāi)
  function canvasMouseUp(e) {
    upPoint=e.absolutePointer

    if (currentType==='ellipse') {
      // 需要判斷點(diǎn)擊時(shí)和松開(kāi)時(shí)鼠標(biāo)的坐標(biāo)點(diǎn)是否相等，相等的話就不創(chuàng)建橢圓了
      if (JSON.stringify(downPoint)===JSON.stringify(upPoint)) {
        canvas.remove(currentEllipse)
      } else {
        // 設(shè)置橢圓樣式
        currentEllipse.set('stroke', '#000')
      }
      // 清除臨時(shí)創(chuàng)建的橢圓
      currentEllipse=null
    }
  }

  window.onload=function() {
    initCanvas()
  }
</script>
復(fù)制代碼

從上面的代碼可以看出，主要核心部分就是 “鼠標(biāo)點(diǎn)擊時(shí)，鼠標(biāo)移動(dòng)時(shí)，松開(kāi)鼠標(biāo)后” 這幾個(gè)環(huán)節(jié)。鼠標(biāo)移動(dòng)時(shí)，要實(shí)時(shí)監(jiān)聽(tīng)鼠標(biāo)當(dāng)前的坐標(biāo)，松開(kāi)鼠標(biāo)后就不再監(jiān)聽(tīng)。

代碼倉(cāng)庫(kù)

?Fabric.js 自由繪制橢圓 https://gitee.com/k21vin/fabricjs-demo/blob/master/demos/FreeDrawing/createEllipse.html

明：SVG 雖然也是標(biāo)簽，但它不是 HTML5，標(biāo)題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學(xué) SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒(méi)有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會(huì)失真。

與其他圖像比較，SVG 的優(yōu)勢(shì)有以下幾點(diǎn)：

SVG 可以被多個(gè)工具讀取和修改。
SVG 與其他格式圖片相比，尺寸更小，可壓縮性強(qiáng)。
SVG 可任意伸縮。
SVG 圖像可以隨意地高質(zhì)量打印。
SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
SVG 是純粹的 XML，不是 HTML5。
SVG是W3C標(biāo)準(zhǔn)

二、SVG 形狀元素

2.1、svg 標(biāo)簽

SVG 的代碼都放到 svg 標(biāo)簽?zāi)兀琒VG 中的標(biāo)簽都是閉合標(biāo)簽，與html中標(biāo)簽用法一致。svg的屬性有：

有width和height，指定了svg的大小。

eg：畫(huà)一條直線，完整代碼如下：

<!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 設(shè)置的寬高沒(méi)有帶單位，此時(shí)默認(rèn)是像素值，如果需要添加單位時(shí)，除了絕對(duì)單位，也可以設(shè)置相對(duì)單位。

viewBox 屬性

使用語(yǔ)法：<svg viewBox=" x1,y1,width,height "></svg>

四個(gè)參數(shù)分別是左上角的橫縱坐標(biāo)、視口的寬高。表示只看SVG的某一部分，由上述四個(gè)參數(shù)決定。

使用 viewBox 之后，相當(dāng)于svg整體大小不變，只能看到 viewBox 設(shè)置部分，視覺(jué)上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁(yè)面中，也可以通過(guò) html 的embed、object、iframe嵌入到html中。嵌入的時(shí)候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語(yǔ)法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類型。

優(yōu)點(diǎn)：所有瀏覽器都支持，并允許使用腳本。

缺點(diǎn)：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語(yǔ)法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類型。

優(yōu)點(diǎn)：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點(diǎn)：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語(yǔ)法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設(shè)置的大小和邊框。

優(yōu)點(diǎn)：所有瀏覽器都支持，并允許使用腳本。

缺點(diǎn)：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標(biāo)簽直接插入 html 內(nèi)容內(nèi)，與其他標(biāo)簽用法一致。

2.2.5、連接到svg文件：

使用 a 標(biāo)簽，直接鏈接到 SVG 文件。

使用語(yǔ)法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語(yǔ)法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標(biāo)簽創(chuàng)建線條，(x1,y1)是起點(diǎn)，(x2,y2)是終點(diǎn)，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語(yǔ)法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設(shè)置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(rèn)(0,0)
 rx="20" ry="50" //可選 設(shè)置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數(shù) width、height是必填參數(shù)，x、y是可選參數(shù)，如不設(shè)置的時(shí)候，默認(rèn)為(0,0)，也就是svg的左上角開(kāi)始繪制。rx、ry是可選參數(shù)，不設(shè)置是矩形沒(méi)有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語(yǔ)法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數(shù)，如果不設(shè)置默認(rèn)圓心是（0,0）。r是必需參數(shù)，設(shè)置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個(gè)半徑是相同的。

// 使用語(yǔ)法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設(shè)置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設(shè)置橢圓的圓心 ，可選參數(shù)
 ></ellipse>
</svg>

上述橢圓的兩個(gè)rx、ry兩個(gè)方向半徑是必須參數(shù)，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數(shù)，如果不設(shè)置，則默認(rèn)圓心為（0,0）。

3.5、折線 - polyline

// 使用語(yǔ)法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個(gè)默認(rèn)填充黑色的三角形 -->
 <polyline 
  points=" //點(diǎn)的集合
   0 ,0, // 第一個(gè)點(diǎn)坐標(biāo)
   100,100, // 第二個(gè)點(diǎn)坐標(biāo)
   100,200 // 第三個(gè)點(diǎn)坐標(biāo)
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個(gè)臺(tái)階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執(zhí)行結(jié)果如圖所示：

需要注意的是 points 中包含了多個(gè)點(diǎn)的坐標(biāo)，但不是一個(gè)數(shù)組。

3.6、多邊形 - polygon

polygon 標(biāo)簽用來(lái)創(chuàng)建不少于3個(gè)邊的圖形，多邊形是閉合的，即所有線條連接起來(lái)。

// 使用語(yǔ)法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點(diǎn)
   100,100,  //多邊形的第二點(diǎn)
    0,100  //多邊形的第三點(diǎn)
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時(shí)候與折線有些類似，但是polygon會(huì)自動(dòng)閉合，折線不會(huì)。

3.7、路徑 - path

path 是SVG基本形狀中最強(qiáng)大的一個(gè)，不僅能創(chuàng)建其他基本形狀，還能創(chuàng)建更多其他形狀，如貝塞爾曲線、2次曲線等。

點(diǎn)個(gè)關(guān)注，下篇更精彩！

圓和圓形有點(diǎn)像，但是又不一樣。圓形只有一個(gè)半徑，而橢圓 x 軸和 y 軸上的半徑不同，所以橢圓就是一個(gè)不規(guī)則的圓。

繪制一個(gè)橢圓

在繪制橢圓時(shí)，可以通過(guò) cx 和 cy 屬性確定橢圓的圓心，rx 設(shè)置橢圓的 x 軸的半徑，ry 設(shè)置 y 軸的半徑。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG學(xué)習(xí)(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>

在瀏覽器中的演示效果：

上述代碼中，我們?cè)O(shè)置了橢圓的圓心為 (100,50)，水平半徑為50，垂直半徑為 30。如果將 rx 和 ry 的值設(shè)置為相同的值，則會(huì)繪制一個(gè)規(guī)則的圓。

給橢圓設(shè)置透明度

如果我們要設(shè)置橢圓的透明度，可以使用 opacity 屬性，這個(gè)屬性的取值范圍為 0 到 1 之間的小數(shù)。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG學(xué)習(xí)(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>

在瀏覽器中的演示效果：

我們繪制了兩個(gè)橢圓，其中左邊的橢圓沒(méi)有設(shè)置填充顏色，而右邊的橢圓填充顏色為藍(lán)色，透明度為 0.5。如果要改變橢圓的位置，只需要改變橢圓的圓心坐標(biāo)，即 cx 和 cy 屬性的值即可。

鏈接：https://www.9xkd.com/

在線咨詢

上一篇：Web安全（15）-SQL注入之Oracle,Mon
下一篇：2024年5個(gè)最好用的favicon圖標(biāo)生成網(wǎng)站