Fabric.js 右鍵菜單 - 掘金

K創(chuàng)意鬧新春，我正在參加「春節(jié)創(chuàng)意投稿大賽」，詳情請(qǐng)看：春節(jié)創(chuàng)意投稿大賽

本文簡(jiǎn)介

Fabric.js 默認(rèn)沒提供鼠標(biāo)右鍵事件，只有鼠標(biāo)按鍵點(diǎn)擊、鼠標(biāo)按鍵抬起、鼠標(biāo)移動(dòng) 等事件。但在工作中有可能需要用到 “右鍵” 事件，比如 “右鍵菜單” 。所以就有了本文。
本文主要關(guān)注 Fabric.js 的主要 api 有：

fireRightClick：允許右鍵點(diǎn)擊
stopContextMenu：禁用默認(rèn)右鍵菜單
mouse:down：鼠標(biāo)點(diǎn)擊事件

如果不知道 Fabric.js 的同學(xué)，可以看《Fabric.js 從入門到___》

本案例是使用原生方式開發(fā)，不基于 Vue 、React 等框架，所以不用太擔(dān)心運(yùn)行環(huán)境等問題。

案例代碼放了在文末~

環(huán)境和版本

Chrome瀏覽器版本：96.0.4664.45
Fabric.js版本：4.6.0

思路

先說說需求：

右鍵單擊元素，彈出菜單；
彈出菜單分4種情況（菜單在鼠標(biāo)右側(cè)，菜單在鼠標(biāo)左側(cè)，菜單在鼠標(biāo)上方，菜單在鼠標(biāo)下方）；
左鍵單擊畫布其他地方，隱藏菜單；

實(shí)現(xiàn)思路：

創(chuàng)建畫布；
創(chuàng)建 “菜單” 的DOM元素；
去官網(wǎng)查找 “右鍵相關(guān)事件”；
右鍵單擊在元素上，根據(jù)鼠標(biāo)離畫布邊緣的距離，計(jì)算菜單要顯示的位置；
左鍵單擊在畫布上，隱藏菜單；

實(shí)現(xiàn)

查文檔

在上面的思路中，其實(shí)難點(diǎn)只有 “右鍵相關(guān)事件” 。

在對(duì)象相關(guān)的文檔里，關(guān)于鼠標(biāo)的事件好像沒有右鍵，稍微沾邊點(diǎn)的就是鼠標(biāo)點(diǎn)擊（這里我選了 mousedown）。

于是我去畫布的文檔里找了下，發(fā)現(xiàn)這兩個(gè)屬性：

fireRightClick ：畫布是否可以觸發(fā)右鍵事件
stopContextMenu：禁止默認(rèn)右鍵菜單

哈哈哈哈，發(fā)達(dá)了~

經(jīng)我仔細(xì)觀察，發(fā)現(xiàn) mouse:down 事件里有個(gè) button 屬性：

左鍵：button 的值為 1
右鍵：button 的值為 3
中鍵（也就是點(diǎn)擊滾輪），button 的值為 2，前提需要設(shè)置 fireMiddleClick: true

動(dòng)手開發(fā)

布局

<style>
  /* 容器，相對(duì)定位 */
  .box {
    position: relative;
  }

  /* 畫布，給個(gè)邊框 */
  #canvas {
    border: 1px solid #ccc;
  }

  /* 菜單 */
  .menu-x {
    visibility: hidden; /* 隱藏菜單 */
    z-index: -100;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    background-color: #fff;
  }

  /* 菜單每個(gè)選項(xiàng) */
  .menu-li {
    box-sizing: border-box;
    padding: 4px 8px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }

  /* 鼠標(biāo)經(jīng)過的選項(xiàng)，更改背景色 */
  .menu-li:hover {
    background-color: antiquewhite;
  }

  /* 第一個(gè)選項(xiàng)，頂部?jī)山鞘菆A角 */
  .menu-li:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  /* 最后一個(gè)選項(xiàng)，底部?jī)山鞘菆A角，底部不需要邊框 */
  .menu-li:last-child {
    border-bottom: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
</style>

<!-- 容器（相對(duì)定位） -->
<div class="box">
  <!-- 畫布 -->
  <canvas id="canvas" width="600" height="600"></canvas>

  <!-- 右鍵菜單（絕對(duì)定位，且默認(rèn)是隱藏的） -->
  <div
    id="menu"
    class="menu-x"
  >
    <div class="menu-li">什么都不做</div>
    <div class="menu-li">什么都不做</div>
    <div class="menu-li">什么都不做</div>
    <div class="menu-li">什么都不做</div>
    <div class="menu-li" onclick="delEl()">刪除</div>
  </div>
</div>

此時(shí)的效果如上圖所示。

初始化畫布，并生成圖形

<script>
// 文檔加載后執(zhí)行
window.onload=function() {
  // 輸出當(dāng)前 fabric 版本
  console.log(`Facrib.js版本：${fabric.version}`)

  // 初始化畫布
  init()

  // 禁止在菜單上的默認(rèn)右鍵事件
  menu.oncontextmenu=function(e) {
    e.preventDefault()
  }
}

// 初始化
function init() {
  canvas=new fabric.Canvas('canvas', {
    fireRightClick: true, // 啟用右鍵，button的數(shù)字為3
    stopContextMenu: true, // 禁止默認(rèn)右鍵菜單
  })

  // 矩形
  const rect1=new fabric.Rect({
    left: 10,
    top: 510,
    fill: 'orange',
    width: 40,
    height: 40
  })

  // 圓角矩形
  const rect2=new fabric.Rect({
    left: 510,
    top: 10,
    fill: 'pink',
    width: 40,
    height: 40,
    rx: 10, // 圓角x
    ry: 10, // 圓角y
  })

  // 圓形
  const circle=new fabric.Circle({
    radius: 30, // 半徑
    fill: 'green',
    left: 20,
    top: 20,
  })

  // 三角形
  let triangle=new fabric.Triangle({
    width: 80, // 底邊寬度
    height: 100, // 底邊到定點(diǎn)的距離
    fill: 'blue',
    left: 500,
    top: 480
  })

  // 將矩形添加到畫布中
  canvas.add(rect1, rect2, circle, triangle)
}
</script>

添加點(diǎn)擊事件（判斷右鍵）

<script>
// 省略上面的部分代碼
function init() {
  // 省略部分代碼......
  // 將矩形添加到畫布中
  canvas.add(rect1, rect2, circle, triangle)

  // 按下鼠標(biāo)
  canvas.on('mouse:down', canvasOnMouseDown)
}
    
// 鼠標(biāo)在畫布上的點(diǎn)擊事件
function canvasOnMouseDown(opt) {

  // 判斷：右鍵，且在元素上右鍵
  // opt.button: 1-左鍵；2-中鍵；3-右鍵
  // 在畫布上點(diǎn)擊：opt.target 為 null
  if (opt.button===3 && opt.target) {
    // 獲取當(dāng)前元素
    activeEl=opt.target

    menu.domReady=function() {
      console.log(123)
    }

    // 顯示菜單，設(shè)置右鍵菜單位置
    // 獲取菜單組件的寬高
    const menuWidth=menu.offsetWidth
    const menuHeight=menu.offsetHeight

    // 當(dāng)前鼠標(biāo)位置
    let pointX=opt.pointer.x
    let pointY=opt.pointer.y

    // 計(jì)算菜單出現(xiàn)的位置
    // 如果鼠標(biāo)靠近畫布右側(cè)，菜單就出現(xiàn)在鼠標(biāo)指針左側(cè)
    if (canvas.width - pointX <=menuWidth) {
      pointX -=menuWidth
    }
    // 如果鼠標(biāo)靠近畫布底部，菜單就出現(xiàn)在鼠標(biāo)指針上方
    if (canvas.height - pointY <=menuHeight) {
      pointY -=menuHeight
    }

    // 將菜單展示出來
    menu.style=`
      visibility: visible;
      left: ${pointX}px;
      top: ${pointY}px;
      z-index: 100;
    `
  } else {
    hiddenMenu()
  }
}

// 隱藏菜單
function hiddenMenu() {
  menu.style=`
    visibility: hidden;
    left: 0;
    top: 0;
    z-index: -100;
  `
  activeEl=null
}

// 刪除元素
function delEl() {
  canvas.remove(activeEl)
  hiddenMenu()
}
</script>

上面的代碼中，通過 opt.target 是否為 null 來判斷當(dāng)前點(diǎn)擊的對(duì)象。

opt.target===null ，就是點(diǎn)擊在畫布上（沒有點(diǎn)擊在圖形元素上）。

如果你的項(xiàng)目需求是右鍵點(diǎn)擊畫布也展示不同菜單，你可以修改上面代碼的判斷。

代碼倉庫

原生方式實(shí)現(xiàn)Fabric右鍵菜單：https://gitee.com/k21vin/fabricjs-demo/blob/master/demos/ContextMenu/index.html
在Vue3中使用Fabric實(shí)現(xiàn)右鍵菜單功能：https://gitee.com/k21vin/front-end-data-visualization/blob/master/src/views/FabricJS/Demo/pages/ContextMenu/ContextMenu.vue

如果本文內(nèi)容對(duì)你有所幫助，也請(qǐng)你幫我點(diǎn)個(gè)贊唄~

章正文

前言
安裝 webpack
創(chuàng)建項(xiàng)目
創(chuàng)建一個(gè)簡(jiǎn)單的 Demo
編譯 ES6 代碼
編譯 Vue 代碼
配置 vue-router
讓項(xiàng)目綁定端口跑起來
編譯生成 HTML 文件
處理 CSS
cross-env
使用 Less
處理圖片
處理字體
優(yōu)化緩存
clean-webpack-plugin
抽離公共代碼
優(yōu)化組件的引入路徑
配置懶加載
拆分webpack
結(jié)語
1. 創(chuàng)建 index.js 文件
2. 在當(dāng)前項(xiàng)目安裝 webpack
3. 創(chuàng)建 webpack.dev.config.js
4. 在根目錄創(chuàng)建 HTML 文件
5. 執(zhí)行編譯命令
1. 安裝 ES6 需要的 loader
2. 創(chuàng)建 .babelrc 文件
3. 修改 webpack.dev.config.js 配置
4. 添加 ES6 的代碼
5. 執(zhí)行編譯命令
1. 安裝解析 Vue 語法的 loader 和 Vue
2. 修改 webpack.dev.config.js 配置
3. 添加 Vue 模板文件
4. 執(zhí)行編譯命令

前言

前段時(shí)間一直在找工作，作為前端目前最火的技術(shù)棧 Vue，被問到了很多次，其中問得最多的就是有沒有自己動(dòng)手搭過腳手架。

于是自己就嘗試著搭建 Vue 腳手架，在搭建腳手架的過程中，自己也遇到了各式各樣的問題，在此，我想把這些過程一步一步地寫下來。本文的項(xiàng)目文件夾會(huì)一個(gè)一個(gè)地構(gòu)建，配置每一行都會(huì)有注釋，每一個(gè)文件干什么、配置是做什么的都會(huì)給大家介紹，供大家學(xué)習(xí)參考。

安裝 webpack

在這里我已經(jīng)假設(shè)用戶已經(jīng)安裝 Node 環(huán)境，我就不介紹 Node 環(huán)境的安裝，接下來我們安裝 webpack，這里要全局安裝，否則之后 webpack 命令無法執(zhí)行。

npm install --g webpack webpack-cli

創(chuàng)建項(xiàng)目

使用右鍵創(chuàng)建文件夾 my-app，進(jìn)入文件打開命令提示符或者 PowerShell，執(zhí)行 npm init，直接全部回車，我們會(huì)看到文件夾里會(huì)多了一個(gè) package.json 的文件，這里面主要是對(duì)當(dāng)前項(xiàng)目的一些描述。

創(chuàng)建一個(gè)簡(jiǎn)單的 Demo

這里我準(zhǔn)備隨便寫而一段 ES5 的代碼，然后通過 webpack 打包，介紹 webpack 基本的輸入輸出配置。

1. 創(chuàng)建 index.js 文件

在根目錄創(chuàng)建 src 文件夾，在該文件夾下創(chuàng)建 index.js 文件，并輸入如下代碼：

document.getElementById("app").innerHTML="hello webpack";

2. 在當(dāng)前項(xiàng)目安裝 webpack

npm install --save-dev webpack webpack-cli

在以前只需要安裝 webpack 即可，但是現(xiàn)在必須安裝 webpack-cli，否則 webpack 命令會(huì)出錯(cuò)。

3. 創(chuàng)建 webpack.dev.config.js

我們?cè)诟夸浗ㄒ粋€(gè)名為 webpack.dev.config.js 的文件，寫上如下代碼：

const path=require('path');
module.exports={
  entry: path.join(__dirname, 'src/index.js'),
  output: {
      path: path.join(__dirname, './dist'),
      filename: 'app.js'
  }
};

entry：入口，一般配置項(xiàng)目的入口文件
__dirname：node下的全局變量，返回的是當(dāng)前項(xiàng)目的絕對(duì)路徑
output：項(xiàng)目的輸出配置
output.path：輸出路徑
output.filename: 輸出文件名稱

4. 在根目錄創(chuàng)建 HTML 文件

在根目錄創(chuàng)建名為 index.html 的文件，在 body 中寫下如下內(nèi)容，./dist/app.js 這個(gè)文件暫時(shí)是不存在的，編譯之后才會(huì)有。

<body>
  <div id="app"></div>
  <script src="./dist/app.js"></script>
</body>

5. 執(zhí)行編譯命令

在根目錄執(zhí)行編譯命令，格式：webpack --config 文件名稱

webpack --config webpack.dev.config.js

然后我們會(huì)看到根目錄自動(dòng)生成了 dist 文件夾，里面有一個(gè) app.js，和 webpack.dev.config.js 里面輸出是吻合的。這里來有一個(gè)警告：是指沒有設(shè)置 webpack 的環(huán)境（生產(chǎn) or 開發(fā)）。

一般解決方式兩種：

修改命令

webpack --config webpack.dev.config.js --mode=development 或者 production

在 webpack.dev.config.js 里面的 entry 同級(jí)配置 mode:"development" 或者 mode:"production"。

在瀏覽器打開第 4 步在根目錄創(chuàng)建的 index.html。

編譯 ES6 代碼

剛才演示了如何編譯 ES5 的代碼，接下來我們來看如何編譯 ES6 的代碼。

1. 安裝 ES6 需要的 loader

babel-core：調(diào)用 Babel 的 API 進(jìn)行轉(zhuǎn)碼
babel-preset-env：用于解析 ES6 的語法

npm install babel-core babel-loader babel-preset-env --save-dev

2. 創(chuàng)建 .babelrc 文件

創(chuàng)建 .babelrc 文件，并輸入如下字符：

{
    "presets": [
      [
        "env",
        {
          "targets": {
            "browsers": ["last 2 versions", "ie >=7"]
          }
        }
      ]
    ], 
  }

3. 修改 webpack.dev.config.js 配置

因?yàn)槲覀冃枰?ES6 的代碼轉(zhuǎn)為 ES5 的代碼，除了安裝對(duì)于的 loader 外，還需要在 webpack.dev.config.js 中配置對(duì)于的解析規(guī)則。

在 output 的同級(jí)寫入如下配置：

module: {
    rules: [
        {
            test: /\.js$/,                  
            loader: 'babel-loader',
            exclude:/node-modules/
        },
    ]
}

解析規(guī)則在 module 下的 rules 中配置，test 表示匹配的文件，loader 表示使用什么加載器，exclude 表示禁止解析該目錄下的文件。

4. 添加 ES6 的代碼

使用了 ES6 的箭頭函數(shù)和字符串拼接方式，把 src 目錄下的 index.js 文件修改為：

var str="babel"
var func=s=> {
    document.getElementById("app").innerHTML=`hello ${s}`;
}
func(str);

5. 執(zhí)行編譯命令

執(zhí)行命令：

webpack --config webpack.dev.config.js --mode=development

結(jié)果出現(xiàn)如下錯(cuò)誤：

一邊學(xué)習(xí)javascript一邊跟大家分享成果，喜歡就關(guān)注我吧，大家一起學(xué)習(xí)！

今天分享javascript在chrome瀏覽器的常用斷點(diǎn)調(diào)試

調(diào)試的源碼

開始進(jìn)入今天正題

1設(shè)置斷點(diǎn)

這邊以chrome瀏覽器為例，點(diǎn)F12進(jìn)入調(diào)試，切換到sources選項(xiàng)卡，從左邊選擇要調(diào)試的文件，然后鼠標(biāo)點(diǎn)擊展開文件的行號(hào)，出現(xiàn)藍(lán)色的標(biāo)簽即為打上斷點(diǎn)。打上斷點(diǎn)后刷新網(wǎng)頁，就會(huì)執(zhí)行到打斷點(diǎn)的那一行就停止執(zhí)行。

2介紹常用按鈕

左一（藍(lán)色）：正常執(zhí)行當(dāng)刷新網(wǎng)頁后，停留在斷點(diǎn)處，點(diǎn)擊這個(gè)按鈕就會(huì)繼續(xù)正常執(zhí)行下去

左二：逐過程執(zhí)行當(dāng)斷點(diǎn)斷在一個(gè)函數(shù)的時(shí)候，點(diǎn)這個(gè)按鈕，既執(zhí)行完整個(gè)函數(shù)（直到下一個(gè)函數(shù)）

左三：逐步執(zhí)行這個(gè)按鈕為分步執(zhí)行，每點(diǎn)擊一次就執(zhí)行一行代碼，適用較為細(xì)致的調(diào)試

3逐過程執(zhí)行（結(jié)果）

4逐步執(zhí)行（結(jié)果）

注意藍(lán)條的位置，逐步執(zhí)行到fn2的函數(shù)里面

5設(shè)置條件斷點(diǎn)

在行號(hào)前面點(diǎn)擊鼠標(biāo)右鍵，選擇add conditional breakpoint選項(xiàng)既為設(shè)置條件斷點(diǎn)

輸入條件，如上圖斷點(diǎn)條件為i==5，輸入完成后按回車鍵即設(shè)置完成條件斷點(diǎn)，條件斷點(diǎn)為橙色標(biāo)簽（區(qū)別于普通藍(lán)色斷點(diǎn)）設(shè)置完成后點(diǎn)擊瀏覽器刷新按鈕進(jìn)行調(diào)試。

6watch屬性對(duì)變量進(jìn)行監(jiān)視

watch屬性可以用來監(jiān)視變量的值，如上面設(shè)置條件斷點(diǎn)后進(jìn)行調(diào)試，查看屬性是否正確！

在線咨詢

上一篇：css代碼規(guī)范工具stylelint
下一篇：css 水平居中的幾種實(shí)現(xiàn)方式

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

Fabric.js 右鍵菜單 - 掘金

本文簡(jiǎn)介

環(huán)境和版本

思路

實(shí)現(xiàn)

查文檔

動(dòng)手開發(fā)

代碼倉庫

章正文

前言

安裝 webpack

創(chuàng)建項(xiàng)目

創(chuàng)建一個(gè)簡(jiǎn)單的 Demo

1. 創(chuàng)建 index.js 文件

2. 在當(dāng)前項(xiàng)目安裝 webpack

3. 創(chuàng)建 webpack.dev.config.js

4. 在根目錄創(chuàng)建 HTML 文件

5. 執(zhí)行編譯命令

編譯 ES6 代碼

1. 安裝 ES6 需要的 loader

2. 創(chuàng)建 .babelrc 文件

3. 修改 webpack.dev.config.js 配置

4. 添加 ES6 的代碼

5. 執(zhí)行編譯命令

您的項(xiàng)目需求