Fabric.js 限制边框宽度缩放

news2025/7/11 19:42:50

本文简介

点赞 + 关注 + 收藏 = 学会了


使用 fabric.js 在某些情况下你可能需要固定元素边框的宽度,仔细看文档你会发现 fabric.js 已经为我们提供了这个功能。本文简单介绍一下这个功能。


实现方法

先揭晓答案,将元素的 strokeUniform 属性设置为 true 后,元素在缩放后,边框会恢复成最初设置的大小。

file

<canvas id="canvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  let rect = new fabric.Rect({
    left: 260,
    top: 110,
    width: 80,
    height: 60,
    fill: 'hotpink',
    stroke: '#333',
    strokeWidth: 10,
    strokeUniform: true // 限制边框宽度缩放
  })

  // 省略部分元素

  canvas.add(rect)
</script>

在本例中,我将几何元素的边框宽度设置成10,在用鼠标拖放几何元素后,元素的边框宽度也会恢复成10。


strokeUniform 的默认值是 false,如果不将 strokeUniform 设置为 true,边框就会随着几何元素的缩放而缩放。


fillstrokestrokeWidth 等属性如果忘了的话可以查看 《Fabric.js从入门到 _ _ _ _ _ _》 复习一下。



遗憾的是

遗憾的是,将 strokeUniform 设置为 true 后对文本元素并不生效。

file

<canvas id="canvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  let text = new fabric.Text('雷猴啊', {
    top: 30,
    left: 30,
    fill: 'orange',
    stroke: '#333',
    strokeWidth: 2,
    strokeUniform: true // 在 Text 里不生效!!!
  })

  // 省略部分元素

  canvas.add(text)
</script>


代码仓库

⭐ strokeUniform限制边框宽度缩放



推荐阅读

👍《Fabric.js 喷雾笔刷 从入门到放肆》

👍《Fabric.js 监听元素相交(重叠)》

👍《Fabric.js 设置容器类名要注意这几点》

👍《Fabric.js 元素被遮挡的部分也可以操作》

👍《Fabric.js 动态设置字号大小》

👍《Fabric.js 橡皮擦的用法(包含恢复功能)》


点赞 + 关注 + 收藏 = 学会了 代码仓库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/109493.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

适合贵校的核心营销讯息

香港 (Xinwengao.com) — 优秀的学校具备策略来提升形象、提高学生的成功率、改善收生&#xff08;和重新入学&#xff09;的成果。这包括为你的学校定下营销讯息。大多数学校都具备自己的营销策略&#xff0c;但很少有营销讯息。一个有力的营销讯息可大大地支援营销策略。 即…

避坑细节拉满!阿里p8技术官私传:MyBatis源码全解析,全彩版附代码分享

摘要 MyBatis是一款优秀的持久层框架&#xff0c;它支持自定义SQL&#xff0c;存储过程以及高级映射&#xff0c;越来越多的企业已经将MyBatis使用到了正式的生产环境&#xff0c;而国内Mybatis流行的原因就在于绝大部分项目都是面向表结构编程的&#xff0c;把Java对象仅当成…

【敏捷研发系列】前端DevOps流水线实践

一、背景现状 软件开发从传统的瀑布流方式到敏捷开发&#xff0c;将软件交付过程中开发和测试形成快速的迭代交付&#xff0c;但在软件交付客户之前或者使用过程中&#xff0c;还包括集成、部署、运维等环节需要进一步优化交付效率。因此Devops的产生将敏捷的相关理念扩展到运…

认识操作系统

操作系统 1 OS 简史 1.1 批处理操作系统 1946-02-04 世界上第一台公认的通用计算机ENIAC在 宾夕法尼亚大学 诞生。1956 年实现 GM-NAA I/O 系统具备批处理特性。 1.2 从专用走向通用 1964 年&#xff0c;美国IBM公司发布 IBM System/360 的大型机。将计算机架构和实现分开…

【Java入门基础第10天】Java常用的转义字符

Java常用的转义字符1、\t:一个制表位,实现对齐功能2、\n:换行符3、\\:转义字符 一个4、\":一个"5、\:一个6、\r:一个回车 System.out.println("学刑法\r有钱途")7、应用实例(Exercise&#xff09;1、\t:一个制表位,实现对齐功能 \t:一个制表位,实现对齐功…

从文科生到前端专家 - 在转行时我想过的问题

▐ 在学习编程之前 在高中时&#xff0c;因为学不会物理和化学&#xff0c;我选择了文科&#xff0c;这也意味着计算机专业类对我关上了大门&#xff0c;不过在当时我也没有想到自己在未来会喜欢上写代码并以此为生。 现在回想起来&#xff0c;与编程有关的只有两件事情。 一是…

java学习day65(乐友商城)实现搜索、分页、排序

1.索引库数据导入 昨天我们学习了Elasticsearch的基本应用。今天就学以致用&#xff0c;搭建搜索微服务&#xff0c;实现搜索功能。 1.1.创建搜索服务 创建module&#xff1a; Pom文件&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <…

【软件测试】瓶颈?资深测试聊测试开发的瓶颈在哪?

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 测试开发的发展是不…

嵌入式C语言面向对象编程 --- 封装

大部分使用 C 语言进行开发的工程师,在接触更高级的编程语言之前,都认为 C 语言是面向过程的。事实也是如此,对于一些小规模的单片机应用程序,一般都是使用“面向过程”的思维进行单片机C语言编程开发。 但是,如果是需要用C语言开发一些规模比较大的软件的时候,比如操作…

pycharm 中sqlite升级方法

sqlite 3.21升级到3.40 Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:59:51) [MSC v.1914 64 bit (AMD64)] on win32 Type "help", "copyright", "credits" or "license" for more information. >>> help Type help()…

小哥用Python兼职月入过万,用Python做项目有多赚钱?

问&#xff1a;请问用Python可以接哪些兼职的活赚钱&#xff1f; 1 兼职费用足够学费生活费 恰巧上学期间接过一些外包&#xff0c;恩&#xff0c;足够我和我媳妇的学费以及生活费&#xff0c;以及xx各种费用。 主要干过以下几种&#xff1a; 游戏外挂&#xff1a;主要开发…

Jetpack Compose中的导航路由

Jetpack Compose中的导航库是由Jetpack库中的Navigation组件库的基础上添加的对Compose的扩展支持&#xff0c;使用需要单独添加依赖&#xff1a; implementation "androidx.navigation:navigation-compose:$nav_version" Jetpack库中的Navigation使用起来还是比较麻…

毕业时就已26,工作4年就已大龄,码农出路在哪?

边工作边迷茫这可能是我们大多数职场人的常态。一边觉得这份工作不适合自己&#xff0c;另一边又不知道能去做什么。喜欢的工作&#xff0c;却又不知道如何提升。长此以往&#xff0c;内心难免产生焦躁&#xff0c;尤其随着年龄的增长&#xff0c;内心更是希望能够在事业上有所…

MySQL数据库的安装、创建库、创建表、创建测试数据及连接取数

安装MySQL数据库MySQL数据库简介安装MySQL数据库下载安装包安装MySQLMySQL创建一个新的数据库&#xff0c;并在其中创建新的数据表&#xff0c;填充测试数据并查看mysql>模式下输入的每句sql语句都要以;结尾&#xff1b;若多行语句无;&#xff0c;则被默认为一条语句未输入完…

设计好接口的36个锦囊

前言 大家好&#xff0c;我是捡田螺的小男孩。作为后端开发&#xff0c;不管是什么语言&#xff0c;Java、Go还是C&#xff0c;其背后的后端思想都是类似的。后面打算出一个后端思想的技术专栏&#xff0c;主要包括后端的一些设计、或者后端规范相关的&#xff0c;希望对大家日…

redis安装 3台机器 6节点

一&#xff1a; redis官网地址&#xff1a; 6.2.6版本 1 | Index of /releases/http://download.redis.io/releases/ 二&#xff1a; 编辑配置文件 1: 注释本地IP地址&#xff1a; 1&#xff1a; bind: 本地IP 2&#xff1a; protected-mode no: #关闭保护模式 3&#xff1…

KG-构建:知识图谱基础代码构建(医疗向)

项目来源是GitHub上面刘老师做的一个基于知识医疗图谱的问答机器人&#xff0c;本文主要关注点放在建立知识图谱这一侧。这个项目并且将数据集也开源了放在dict和data文件夹下&#xff0c;让我觉得真的很难得&#xff0c;得给老师一个star&#xff01; https://github.com/liu…

智能制造数字化转型难点有哪些?

① 企业高层没有意识到数字化转型的必要性、紧迫性和复杂性&#xff0c;观念还停留在部署常用的IT系统。实际上&#xff0c;数字化转型远远不是IT部门能够实现的&#xff0c;必须由企业的决策层引领&#xff0c;自顶向下推进。 ② 企业已经应用了诸多信息系统&#xff0c;但是…

《MySQL高级篇》九、数据库的设计规范

文章目录1. 为什么需要数据库设计2. 范 式2.1 范式简介2.2 范式都包括哪些2.3 键和相关属性的概念2.4 第一范式(1st NF)2.5 第二范式(2nd NF)2.6 第三范式(3rd NF)2.7 小结3. 反范式化3.1 概述3.2 应用举例3.3 反范式的新问题3.4 反范式的适用场景4. BCNF(巴斯范式)5. 第四范式…

SOLIDWORKS Electrical 2023新功能揭秘!提高电气工程师设计效率 与机械工程师协同设计

SOLIDWORKS 2023新版本已经与大家见面&#xff0c;今天众联亿诚与大家分享SOLIDWORKS Electrical 2023新功能。 电气工程师在完成电气原理图设计的同时&#xff0c;还需要频繁地修改、导出各报表&#xff0c;使得大量时间浪费在重复性的手动工作上。即便如此&#xff0c;也无法…