本文简介 Fabric。js默认没提供鼠标右键事件，只有鼠标按键点击、鼠标按键抬起、鼠标移动等事件。但在工作中有可能需要用到右键事件，比如右键菜单。所以就有了本文。 本文主要关注Fabric。js的主要api有：fireRightClick：允许右键点击stopContextMenu：禁用默认右键菜单mouse：down：鼠标点击事件 如果不知道Fabric。js的同学，可以看Fabric。js中文入门教程 本案例是使用原生方式开发，不基于Vue、React等框架，所以不用太担心运行环境等问题。 案例代码放了在文末 环境和版本Chrome浏览器版本：96。0。4664。45 Fabric。js版本：4。6。0 思路 先说说需求：右键单击元素，弹出菜单；弹出菜单分4种情况（菜单在鼠标右侧，菜单在鼠标左侧，菜单在鼠标上方，菜单在鼠标下方）；左键单击画布其他地方，隐藏菜单； 实现思路：创建画布；创建菜单的DOM元素；去官网查找右键相关事件；右键单击在元素上，根据鼠标离画布边缘的距离，计算菜单要显示的位置；左键单击在画布上，隐藏菜单； 实现查文档 在上面的思路中，其实难点只有右键相关事件。 在对象相关的文档里，关于鼠标的事件好像没有右键，稍微沾边点的就是鼠标点击（这里我选了mousedown）。 于是我去画布的文档里找了下，发现这两个属性：fireRightClick：画布是否可以触发右键事件stopContextMenu：禁止默认右键菜单 哈哈哈哈，发达了 经我仔细观察，发现mouse：down事件里有个button属性：左键：button的值为1右键：button的值为3中键（也就是点击滚轮），button的值为2，前提需要设置fireMiddleClick：true 动手开发 布局style容器，相对定位。box｛position：relative；｝画布，给个边框canvas｛border：1pxsolidccc；｝菜单。menux｛visibility：hidden；隐藏菜单zindex：100；position：absolute；top：0；left：0；boxsizing：borderbox；borderradius：4px；boxshadow：004pxrgba（0，0，0，0。3）；backgroundcolor：fff；｝菜单每个选项。menuli｛boxsizing：borderbox；padding：4px8px；borderbottom：1pxsolidccc；cursor：pointer；｝鼠标经过的选项，更改背景色。menuli：hover｛backgroundcolor：antiquewhite；｝第一个选项，顶部两角是圆角。menuli：firstchild｛bordertopleftradius：4px；bordertoprightradius：4px；｝最后一个选项，底部两角是圆角，底部不需要边框。menuli：lastchild｛borderbottom：none；borderbottomleftradius：4px；borderbottomrightradius：4px；｝style！容器（相对定位）！画布canvasidcanvaswidth600height600canvas！右键菜单（绝对定位，且默认是隐藏的）什么都不做什么都不做什么都不做什么都不做删除 此时的效果如上图所示。 初始化画布，并生成图形 添加点击事件（判断右键） 上面的代码中，通过opt。target是否为null来判断当前点击的对象。 opt。targetnull，就是点击在画布上（没有点击在图形元素上）。 如果你的项目需求是右键点击画布也展示不同菜单，你可以修改上面代码的判断。 代码仓库 推荐 Fabric。js中文入门教程 Fabric。js元素选中状态的事件与样式 Fabric。js拖放元素进画布掘金 Fabric。js渐变的用法（径向渐变和线性渐变）
全球13台根服务器，美国10台中国1台没有，为何不担心被断了要知道，随着时代的发展，如今全球早已进入互联网的时代。甚至可以说，互联网与人类生活、科技、工业的发展息息相关。可是说到互联网的根服务器，此前一直都是中国的短板。最大的原因就是全……小米上半年利润才7。9亿，格力却赚了114亿，雷军却还想去做提到小米这家公司，不得不提到格力。其实小米跟格力是两家完全不一样的公司，不管是产品线，还是发展的路线，其实都没有对比性。可是就是因为两家公司完全不一样的策略，所以又让两家公司可……王鸥的日常打扮好精致，穿一身黑色风衣气场十足，涂红唇好霸气今天穿什么冬日生活打卡季在那些最时髦且最有设计感的服装中，风衣的气质依旧独占鳌头，不光是因为风衣本身的飒爽与利落感，也是由于风衣的气质与韵味，具有较强的女性气质，还能展现……哭晕在厕所，这台iPhone13ProMax居然是扩容机，而今天这位网友非常恼火，在某平台买了一台美版iPhone13ProMax，价格便宜，成色极品，但没想到该机居然是扩容机！关键是还有网络锁！截图是iPhone13ProMax……笑不活了！柳鑫宇采访上演花式撒娇，王诗玥一脸无奈从不撒娇近日，中国花样滑冰团队的运动员得到了媒体的广泛关注，他们在北京冬奥会的赛场上获得了不错的成绩在双人滑比赛里，韩聪和隋文静拿到了金牌，平复了4年之前遗憾失金的痛苦。而在冰舞的赛场……山河月明中年冯绍峰演18岁朱棣，观众的评价够真实中年演员出演少年、少女，已经是娱乐圈的普遍现象，不管观众如何吐槽、调侃，都改变不了导演的这种固定的选演员方式。可话说回来，不管是哪一位演员，只要人到中年再次演年轻角色的话……广电5G即将放号，移动通信市场将会发生哪些变化？酝酿已久的中国第四大移动运营商中国广电，终于要开门迎客了。中国广电网络股份有限公司（以下简称：中国广电）的加入，将会对中国移动通信市场带来哪些变化呢？变化一：广电加速转型……都跌到2。8分了？？？至于么情人节看看片，挺好的。其实，今年的情人节档期非常难得，竟然有三部专门针对情人节的爱情片上映，在这两年，已经算很少见的操作了。当然了，如果你是一个人，选择在情人节去电……吃对了应季时令蔬菜，真的更利于健康春日生活打卡季跟着大厨学做菜我国地大物博，幅员辽阔，所以南北方蔬菜，水果当季出产的很难统一。所谓时令蔬果，就是在对应的季节，应季种植产出的新鲜蔬菜和水果，避免了长途运输，……点赞！又一上港球员确认转会欧洲俱乐部，球迷比恒大强多了根据足球记者刘闻超的消息，上海海港19岁小将、国青球员贾博琰，已经确认加盟瑞超联赛俱乐部草蜢的手续。此外，刘闻超还特别强调贾博琰是转会而不是租借加盟草蜢，以此来显示上海海港支持……银行调整人民币存款新利息2022年02月，各类银行存款最新利2022年02月，国内各类银行人民币存款全新利息表定期存款，是指存款人将现金存入在银行机构开设的定期储蓄账户内，事先约定以固定期限为储蓄时间，以高于活期存款的利息获得回报……数字人民币借冬风推广，未来如何进一步普及？来源：人民网强国论坛原创稿人民网北京2月20日电（方经纶）北京冬奥会不仅提高了人们对于冰雪运动的关注度与参与度，同时正促进着中国冰雪经济的蓬勃发展，其中，数字人民币的使用……