整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
K创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛
Fabric.js 默认没提供 鼠标右键事件，只有 鼠标按键点击 、鼠标按键抬起 、鼠标移动 等事件。 但在工作中有可能需要用到 “右键” 事件，比如 “右键菜单” 。所以就有了本文。
本文主要关注 Fabric.js 的主要 api 有：
如果不知道 Fabric.js 的同学，可以看 《Fabric.js 从入门到___》
本案例是使用原生方式开发，不基于 Vue 、React 等框架，所以不用太担心运行环境等问题。
案例代码放了在文末~
Chrome浏览器版本：96.0.4664.45
Fabric.js版本：4.6.0
先说说需求：
实现思路：
在上面的思路中，其实难点只有 “右键相关事件” 。
在 对象相关的文档 里，关于鼠标的事件好像没有右键，稍微沾边点的就是鼠标点击（这里我选了 mousedown）。
于是我去 画布的文档 里找了下，发现这两个属性：
哈哈哈哈，发达了~
经我仔细观察，发现 mouse:down 事件里有个 button 属性：
布局
<style>
/* 容器，相对定位 */
.box {
position: relative;
}
/* 画布，给个边框 */
#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;
}
/* 菜单每个选项 */
.menu-li {
box-sizing: border-box;
padding: 4px 8px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
/* 鼠标经过的选项，更改背景色 */
.menu-li:hover {
background-color: antiquewhite;
}
/* 第一个选项，顶部两角是圆角 */
.menu-li:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* 最后一个选项，底部两角是圆角，底部不需要边框 */
.menu-li:last-child {
border-bottom: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
</style>
<!-- 容器（相对定位） -->
<div class="box">
<!-- 画布 -->
<canvas id="canvas" width="600" height="600"></canvas>
<!-- 右键菜单（绝对定位，且默认是隐藏的） -->
<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>此时的效果如上图所示。
初始化画布，并生成图形
<script>
// 文档加载后执行
window.onload=function() {
// 输出当前 fabric 版本
console.log(`Facrib.js版本：${fabric.version}`)
// 初始化画布
init()
// 禁止在菜单上的默认右键事件
menu.oncontextmenu=function(e) {
e.preventDefault()
}
}
// 初始化
function init() {
canvas=new fabric.Canvas('canvas', {
fireRightClick: true, // 启用右键，button的数字为3
stopContextMenu: true, // 禁止默认右键菜单
})
// 矩形
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, // 底边到定点的距离
fill: 'blue',
left: 500,
top: 480
})
// 将矩形添加到画布中
canvas.add(rect1, rect2, circle, triangle)
}
</script>添加点击事件（判断右键）
<script>
// 省略上面的部分代码
function init() {
// 省略部分代码......
// 将矩形添加到画布中
canvas.add(rect1, rect2, circle, triangle)
// 按下鼠标
canvas.on('mouse:down', canvasOnMouseDown)
}
// 鼠标在画布上的点击事件
function canvasOnMouseDown(opt) {
// 判断：右键，且在元素上右键
// opt.button: 1-左键；2-中键；3-右键
// 在画布上点击：opt.target 为 null
if (opt.button===3 && opt.target) {
// 获取当前元素
activeEl=opt.target
menu.domReady=function() {
console.log(123)
}
// 显示菜单，设置右键菜单位置
// 获取菜单组件的宽高
const menuWidth=menu.offsetWidth
const menuHeight=menu.offsetHeight
// 当前鼠标位置
let pointX=opt.pointer.x
let pointY=opt.pointer.y
// 计算菜单出现的位置
// 如果鼠标靠近画布右侧，菜单就出现在鼠标指针左侧
if (canvas.width - pointX <=menuWidth) {
pointX -=menuWidth
}
// 如果鼠标靠近画布底部，菜单就出现在鼠标指针上方
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 来判断当前点击的对象。
opt.target===null ，就是点击在画布上（没有点击在图形元素上）。
如果你的项目需求是右键点击画布也展示不同菜单，你可以修改上面代码的判断。
如果本文内容对你有所帮助，也请你帮我点个赞呗~
前段时间一直在找工作，作为前端目前最火的技术栈 Vue，被问到了很多次，其中问得最多的就是有没有自己动手搭过脚手架。
于是自己就尝试着搭建 Vue 脚手架，在搭建脚手架的过程中，自己也遇到了各式各样的问题，在此，我想把这些过程一步一步地写下来。本文的项目文件夹会一个一个地构建，配置每一行都会有注释，每一个文件干什么、配置是做什么的都会给大家介绍，供大家学习参考。
在这里我已经假设用户已经安装 Node 环境，我就不介绍 Node 环境的安装，接下来我们安装 webpack，这里要全局安装，否则之后 webpack 命令无法执行。
npm install --g webpack webpack-cli使用右键创建文件夹 my-app，进入文件打开命令提示符或者 PowerShell，执行 npm init，直接全部回车，我们会看到文件夹里会多了一个 package.json 的文件，这里面主要是对当前项目的一些描述。
这里我准备随便写而一段 ES5 的代码，然后通过 webpack 打包，介绍 webpack 基本的输入输出配置。
在根目录创建 src 文件夹，在该文件夹下创建 index.js 文件，并输入如下代码：
document.getElementById("app").innerHTML="hello webpack";npm install --save-dev webpack webpack-cli在以前只需要安装 webpack 即可，但是现在必须安装 webpack-cli，否则 webpack 命令会出错。
我们在根目录建一个名为 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'
}
};在根目录创建名为 index.html 的文件，在 body 中写下如下内容，./dist/app.js 这个文件暂时是不存在的，编译之后才会有。
<body>
<div id="app"></div>
<script src="./dist/app.js"></script>
</body>在根目录执行编译命令，格式：webpack --config 文件名称
webpack --config webpack.dev.config.js然后我们会看到根目录自动生成了 dist 文件夹，里面有一个 app.js，和 webpack.dev.config.js 里面输出是吻合的。这里来有一个警告：是指没有设置 webpack 的环境（生产 or 开发）。
一般解决方式两种：
修改命令
webpack --config webpack.dev.config.js --mode=development 或者 production在 webpack.dev.config.js 里面的 entry 同级配置 mode:"development" 或者 mode:"production"。
在浏览器打开第 4 步在根目录创建的 index.html。
刚才演示了如何编译 ES5 的代码，接下来我们来看如何编译 ES6 的代码。
npm install babel-core babel-loader babel-preset-env --save-dev创建 .babelrc 文件，并输入如下字符：
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions", "ie >=7"]
}
}
]
],
}因为我们需要把 ES6 的代码转为 ES5 的代码，除了安装对于的 loader 外，还需要在 webpack.dev.config.js 中配置对于的解析规则。
在 output 的同级写入如下配置：
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude:/node-modules/
},
]
}解析规则在 module 下的 rules 中配置，test 表示匹配的文件，loader 表示使用什么加载器，exclude 表示禁止解析该目录下的文件。
使用了 ES6 的箭头函数和字符串拼接方式，把 src 目录下的 index.js 文件修改为：
var str="babel"
var func=s=> {
document.getElementById("app").innerHTML=`hello ${s}`;
}
func(str);执行命令：
webpack --config webpack.dev.config.js --mode=development结果出现如下错误：
一边学习javascript一边跟大家分享成果，喜欢就关注我吧，大家一起学习！
今天分享javascript在chrome浏览器的常用断点调试
调试的源码
开始进入今天正题
1设置断点
这边以chrome浏览器为例，点F12进入调试，切换到sources选项卡，从左边选择要调试的文件，然后鼠标点击展开文件的行号，出现蓝色的标签即为打上断点。打上断点后刷新网页，就会执行到打断点的那一行就停止执行。
2介绍常用按钮
左一（蓝色）：正常执行 当刷新网页后，停留在断点处，点击这个按钮就会继续正常执行下去
左二：逐过程执行 当断点断在一个函数的时候，点这个按钮，既执行完整个函数（直到下一个函数）
左三：逐步执行 这个按钮为分步执行，每点击一次就执行一行代码，适用较为细致的调试
3逐过程执行（结果）
4逐步执行（结果）
注意蓝条的位置，逐步执行到fn2的函数里面
5设置条件断点
在行号前面点击鼠标右键，选择add conditional breakpoint选项既为设置条件断点
输入条件，如上图断点条件为i==5，输入完成后按回车键即设置完成条件断点，条件断点为橙色标签（区别于普通蓝色断点）设置完成后点击浏览器刷新按钮进行调试。
6watch属性对变量进行监视
watch属性可以用来监视变量的值，如上面设置条件断点后进行调试，查看属性是否正确！
*请认真填写需求信息，我们会在24小时内与您取得联系。
