当前位置: 首页 > news >正文

fabric.js 中originX originY center设置问题

在最开始一直对fabric中的originX和originY很迷,设置center属性是怎么的一个中心对齐方式,为什么一个组里, 有一个设置了center,其他的都会连带呢?

于是自己就进行代表探索

 // 左侧组:只有蓝色圆设置center origin
var circle_left = new this.$fabric.Circle({radius: 80,fill: 'pink',
});
var circle1_left = new this.$fabric.Circle({radius: 60,fill: 'blue',originX: 'center',  // 只有这个设置了centeroriginY: 'center',
});
var text_left = new this.$fabric.Text('蓝圆center', {fontSize: 16,
});var group_left = new this.$fabric.Group([circle_left, circle1_left, text_left], {left: 150,top: 150,
});
this.canvas.add(group_left);

在这里插入图片描述
在组当中是这样的效果
最形象的解释是:
1. 默认对象(左上角对齐):

  • 就像把一本书的左上角贴在桌子的左上角
  • 书的其他部分自然延伸到右边和下面

2. 设置了center的对象(中心点对齐):

  • 就像把一本书的中心点贴在桌子的左上角
  • 书的左上角就会跑到桌子的外面(左上方向)
    在这里插入图片描述
    在这里插入图片描述
    个人认为,第一个元素设置了center,其余元素都会以这个center元素为准,之后的元素设置center都会把圆心向最先的center元素中心对齐。

在这里插入图片描述

http://www.dtcms.com/a/528727.html

相关文章:

  • java开发手册与规范
  • 展示网站开发 大概多少钱wordpress+4.2.4中文
  • 深圳建设局官网站对网站建设需求
  • linux:查看某个文件下开启的进程占用的是哪个端口?
  • 【开题答辩过程】以《基于微信小程序的街道水电费缴纳系统》为例,不会开题答辩的可以进来看看
  • (数据结构)栈和队列
  • 体育西网站开发方案成都和奇乐网站建设公司怎么样
  • 网站管理后台 模板河南省建设厅网站总经济师
  • 网站建设难学吗广西建设厅官网站
  • Linux内核RDMA通信管理器ConfigFS配置接口深度解析
  • R语言模型分析(一)
  • gitee简易的命令入门教程
  • 永康建设局网站电话佛山建网站
  • Profinet 转 TCP/IP 协议转换网关:打破 PLC 与打标卡协议壁垒的工业通讯利器
  • 做网站花了2万多做网站的专业公司
  • OceanBase常见Hint使用
  • LeetCode算法日记 - Day 83: 乘积最大的子数组
  • 站长之家的作用什么是优化资源配置
  • FreeRTOS在MCU开发中常用应用
  • AIGC视频生成之Deepseek、百度妙笔组合实战小案例
  • wordpress 付费剧集网站免费建立网站有必要吗
  • ES数据聚合及其java实现
  • 二、模型训练与参数高效微调范式
  • 美的公司网站建设的目的网站设计注意因素
  • 手机环境光自动亮度调节系统完整实现详解
  • 记录一次海思Hi3798MV200-android7.0平台开机卡在第一张图无法进入系统问题分析解决过程
  • 【设计模式笔记03】:里氏代换原则和依赖倒置原则
  • 网站运行环境建设方案南京做网站南京乐识赞
  • [sam2图像分割] 图像编码器 | Hiera FPN Neck
  • 基于 Dify 的 Excel 测试用例自动化脚本生成工作流开发