(6)JS-Clipper2之ClipperOffset

1. 描述

ClipperOffset类封装了对打开路径和关闭路径进行偏移(膨胀/收缩)的过程。
这个类取代了现在已弃用的OffsetPaths函数,该函数不太灵活。可以使用不同的偏移量(增量)多次调用Execute方法,而不必重新分配路径。现在可以在一次操作中对开放和封闭路径的混合进行偏移。此外,OffsetPaths的Limit参数的双重功能不仅让一些用户感到困惑,而且当EndType是etRound和Jo时,它也阻止了自定义RoundPrecision被分配。

当偏移闭合路径(多边形)时,重要的是:

  1. 它们的方向是一致的,即外多边形具有相同的方向,而孔具有相反的方向,
  2. 它们不自相交。

2.属性

2.1 ClipperLib.ClipperOffset.ArcTolerance

ArcTolerance只有在JoinType是jtRound或者当EndType是开放式轮廓(JoinType = jtRound and/or EndType = etRound)的时候才有效;

ArcTolerance属性(圆弧精度)指定了近似处理弧线时可接受的最大不精确性(“公差”)。

ArcTolerance 默认值为0.25,说明qd(倒角偏离真实圆弧的最大距离)不超过0.25。我们可以发现,qd越小,整个近似圆弧越光滑,代价就是我们需要插入更多的顶点。

将公差降低到0.25以下不会改善平滑度,因为顶点坐标仍将四舍五入为整数值。实现子整数精度的唯一方法是在偏移之前和之后进行坐标缩放(参见下面的示例)。

将ArcTolerance设置为偏移量delta(弧半径)的合理分数是很重要的。相对于偏移delta的较大公差将产生较差的弧近似值,但同样重要的是,非常小的公差将大大降低偏移性能,同时提供不必要的精度。当偏移坐标已被缩放以保持浮点精度的多边形时,这很可能是一个问题。

例如:设想一组多边形(在浮点坐标中定义)将使用圆连接偏移10个单位,解决方案是将浮点精度保持到至少小数点后6位。

为了保持这种程度的浮点精度,并且考虑到Clipper和ClipperOffset都对整数坐标进行操作,在偏移之前,多边形坐标将被缩放108(并四舍五入为整数)。偏移delta和ArcTolerance也需要按相同的因子进行缩放。如果ArcTolerance保持默认的0.25个单位不变,那么解决方案中的每个弧线将包含44000个顶点的一小部分,而最终的弧线不精度将是0.25 × 10-8个单位(即缩放逆转后)。然而,如果在最终未缩放的解决方案中0.1个单位是可接受的不精度,那么ArcTolerance应该设置为0.1 × scaling_factor (0.1 × 108)。现在,如果缩放同样应用于ArcTolerance和Delta Offset,那么在这个例子中,定义每个弧的顶点数(步骤)将是23的一小部分。

Number ArcTolerancevar co = new ClipperLib.ClipperOffset();
co.ArcTolerance = 1.23;

2.2 ClipperLib.ClipperOffset.MiterLimit

该属性包含了一个比例系数(=最大容忍距离/偏置距离),当大于最大容忍距离时,则会使用1*delta距离来进行;

默认的MiterLimit值大小是2,这也是允许的最小MiterLimit大小,如果没有规定合理的MiterLimit,在部分尖锐的拐角处就会形成长的突起,如下图:

3. 方法

3.1 ClipperLib.ClipperOffset()

构造函数

ClipperOffset ClipperOffset(Number miterLimit = 2.0, Number roundPrecision = 0.25);var co = new ClipperLib.ClipperOffset(2.0, 0.25);

构造函数包含了两个可选参数,MiterLimit和ArcTolerance,这两个参数和其同名的属性的含义是相同的。

MiterLimit只是在JoinType是jtMiter的时候才启用,

ArcTolerance只有在JoinType是jtRound或者当EndType是开放式轮廓的时候才有效;

3.2 ClipperLib.ClipperOffset.AddPath()

void AddPath(Path path, JoinType jointype, EndType endtype);var path = [{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}];
var co = new ClipperLib.ClipperOffset(2, 0.25);
co.AddPath(path, ClipperLib.JoinType.jtMiter, ClipperLib.EndType.etClosedPolygon);

向ClipperOffset对象添加一个路径用来准备偏置;

其中开放式路径只能被偏移一个正值;

这个方法可以被多次调用。

3.3 ClipperLib.ClipperOffset.AddPaths()

向ClipperOffset对象添加路径,为偏移做准备。这个方法可以被多次调用。

void AddPaths(Paths paths, JoinType jointype, EndType endtype);var paths = [[{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}],[{X:20,Y:20},{X:20,Y:100},{X:100,Y:100},{X:100,Y:20}]]; 
var co = new ClipperLib.ClipperOffset(2, 0.25);
co.AddPaths(paths, ClipperLib.JoinType.jtMiter, ClipperLib.EndType.etClosedPolygon);

3.4 ClipperLib.ClipperOffset.Clear()

清空所有多边形对象

去除了Clipper对象中所有存在的被裁剪对象和裁剪对象,使得该Clipper对象可以重用

void Clear();var path = [{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}];
var co = new ClipperLib.ClipperOffset();
co.AddPath(path, ClipperLib.JoinType.jtRound, ClipperLib.EndType.etClosedPolygon);
co.Clear();

3.5 ClipperLib.ClipperOffset.Execute()

void Execute(Paths solution, Number delta);
void Execute(PolyTree polytree, Number delta);var subj = new ClipperLib.Paths();
var solution = new ClipperLib.Paths();
subj[0] = [{"X":348,"Y":257},{"X":364,"Y":148},{"X":362,"Y":148},{"X":326,"Y":241},{"X":295,"Y":219},{"X":258,"Y":88},{"X":440,"Y":129},{"X":370,"Y":196},{"X":372,"Y":275}];
var scale = 100;
ClipperLib.JS.ScaleUpPaths(subj, scale);
var co = new ClipperLib.ClipperOffset(2, 0.25);
co.AddPaths(subj, ClipperLib.JoinType.jtRound, ClipperLib.EndType.etClosedPolygon);
co.Execute(solution, -7.0);
ClipperLib.JS.ScaleDownPaths(subj, scale);
//draw solution with your own drawing function...
DrawPolygons(solution, 0x4000FF00, 0xFF009900);

该方法有两个参数,

第一个是接受结果的结构(可以是PolyTree或Paths中的一种),

第二个参数是指偏移量的大小–负值会收缩多边形,正值会膨胀扩边多边形。

该方法可以被调用多次,来实现对相同路径实现不同程度的偏置

关于缩放的注意事项:
因为ClipperOffset使用整数坐标,所以你必须缩放坐标以保持精度并使弧线平滑——在整数输入的情况下也是如此。
Javascript Clipper为此提供了四个函数:ScaleUpPath、scaleupppaths、ScaleDownPath和ScaleDownPaths。
如果JoinType为jtRound或EndType为etRound,强烈建议进行缩放

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

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

相关文章

SpringCloudAlibaba教程之注册中心Nacos

目录 概念 架构 设计原则 架构分层 用户层 业务层 内核层 插件 单机部署 1.下载安装包 2.安装nacos 3.启动nacos 快速开始 1.添加Maven依赖 2.添加配置 3.启动 集群部署 搭建步骤 1.搭建数据库,初始化数据库表结构 2.配置nacos 3.启动nacos集群…

PostgreSQL 安装部署系列:使用YUM 方式在Centos 7.9 安装指定 PostgreSQL -15版本数据库

一、前言 千里之行始于足下,想学习一门数据库,首先要从安装部署开始,先拥有一套属于自己的学习测试库。为了更好的学习该数据库,可以选择一个在企业界使用率比较普及的操作系统,选择稳定版本的操作系统;如果…

【算法】数组中,求K个最大值

已知&#xff1a;数组 [8, 9, 15, 20, 3, 5, 7, 2, 6]&#xff0c;求第8个最大值是哪个值&#xff1f; function quickSort(arr, targetIndex, start) {if (arr.length < 1) return arr[0];let left [];let right [];const mid Math.floor(arr.length / 2);const midNum…

李飞飞的生成式3D场景,对数字孪生的未来影响几何?

大家好&#xff0c;我是日拱一卒的攻城师不浪&#xff0c;致力于技术与艺术的融合。这是2024年输出的第47/100篇文章。 前言 这两天&#xff0c;AI界的教母李飞飞团队重磅发布了空间智能生成式AI大模型。 仅通过一张图片就能够生成一个可操作和交互的3D空间场景。 空间智能的…

【Redis集群】使用docker compose创建docker集群,并暴露外部接口

使用 Docker Compose 创建一个 Redis 集群并暴露外部接口需要配置 docker-compose.yml 文件。以下是一个基本的步骤&#xff0c;包括 Redis 集群的创建和外部接口的暴露。 1、创建 docker-compose.yml 首先&#xff0c;您需要创建一个 docker-compose.yml 文件&#xff0c;配…

Redis面试专题-持久化

目录 前言 持久化相关知识 1.三种持久化机制 2.RDB持久化 3.深入剖析一下RDB持久化过程 4.AOF持久化 5.RDB和AOF对比​编辑 面试题 1.redis持久化机制有哪些&#xff1f; 2.那仔细讲讲你对他们的理解 3.你刚刚说AOF的文件很大&#xff0c;那AOF文件会越来越大&#xf…

数据结构之初始二叉树(1)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 目录 树型结构 树的概念 与树的有关概念 树的表示形式 树的应用 二叉树 概念 两种特殊的…

LeetCode139. 单词拆分(2024冬季每日一题 29)

给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例 1&#xff1a; 输入: s “leetcode”, wordDic…

酷柚易汛生产管理系统PHP+Uniapp

生产管理系统&#xff0c;帮助企业数字化转型&#xff0c;打造智能工厂&#xff0c;专业为生产企业量身开发的一套完整的生产管理系统。主要包含以下模块&#xff1a;购货模块、生产模块、仓库模块、资料模块&#xff0c;可配合酷柚易汛进销存无缝衔接使用。 产品理念: 共享功…

从零开始学TiDB(2)深入了解TiDB Server模块

TiDB Server 架构 TiDB Server 的主要功能&#xff1a; 一条SQL的执行流程&#xff1a; 1.将整个SQL语句解析成一个个的token&#xff0c;生成一个树形结构。 2.编译模块 1.首先需要做一个合法性验证&#xff0c;比如表存不存在等。 2.做逻辑优化&#xff1a;依据关系型代数等…

贪心算法专题(四)

目录 1. 单调递增的数字 1.1 算法原理 1.2 算法代码 2. 坏了的计算器 2.1 算法原理 2.2 算法代码 3. 合并区间 3.1 算法原理 3.2 算法代码 4. 无重叠区间 4.1 算法原理 4.2 算法代码 5. 用最少数量的箭引爆气球 5.1 算法原理 ​5.2 算法代码 1. 单调递增的数字…

241207-通过Docker部署Wiki.JS并设置ElasticSearch进行中文搜索

A. 最终效果 B. 配置文件 version: "3" services:wiki:image: ghcr.io/requarks/wiki:2container_name: wikijsports:- "3000:3000"volumes:- /home/lgk/Projects/WikiJS/config:/configenvironment:- DB_TYPEpostgres- DB_HOSTdatabase- DB_PORT5432- DB…

Spring Boot如何实现防盗链

一、什么是盗链 盗链是个什么操作&#xff0c;看一下百度给出的解释&#xff1a;盗链是指服务提供商自己不提供服务的内容&#xff0c;通过技术手段绕过其它有利益的最终用户界面&#xff08;如广告&#xff09;&#xff0c;直接在自己的网站上向最终用户提供其它服务提供商的…

Splatter Image运行笔记

文章标题&#xff1a;Splatter Image: Ultra-Fast Single-View 3D Reconstruction 1. 环境配置 下载Splatter Image代码 git clone https://github.com/szymanowiczs/splatter-image.git 创建环境 conda create --name splatter-image python3.8 激活环境 conda activat…

springboot394疫情居家办公系统(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统疫情居家办公系统信息管理难度大&#xff0c;容错率低&a…

RabbitMQ七种工作模式之 RPC通信模式, 发布确认模式

文章目录 六. RPC(RPC通信模式)客户端服务端 七. Publisher Confirms(发布确认模式)1. Publishing Messages Individually(单独确认)2. Publishing Messages in Batches(批量确认)3. Handling Publisher Confirms Asynchronously(异步确认) 六. RPC(RPC通信模式) 客⼾端发送消息…

模型训练数据-MinerU一款Pdf转Markdown软件

模型训练数据-MinerU一款Pdf转Markdown软件-说明 简介&#xff1a; MinerU是什么 MinerU是上海人工智能实验室OpenDataLab团队推出的开源智能数据提取工具&#xff0c;专注于复杂PDF文档的高效解析与提取。MinerU能将包含图片、公式、表格等元素的多模态PDF文档转化为易于分析…

STM32F103 PWM配置

在《STM32F103定时器配置》中我们介绍了PWM的产生原理&#xff0c;本节介绍介绍如何编码实现PWM的输出。 一、PWM相关寄存器 TIMx如果要产生PWM&#xff0c;除了我们上一节提到的如下寄存器&#xff1a; 控制寄存器(TIMx_CR1)&#xff1b;DMA/中断使能寄存器(TIMx_DIER)&#x…

Flink Python作业快速入门

Flink Python快速入门_实时计算 Flink版(Flink)-阿里云帮助中心 import argparse # 用于处理命令行参数和选项&#xff0c;使程序能够接收用户通过命令行传递的参数 import logging import sysfrom pyflink.common import WatermarkStrategy, Encoder, Types from pyflink.data…

三菱CNC数采超详细,资料全备教程,后续更新发那科数采教程

三菱数采详细教程 文章目录 三菱数采详细教程一、介绍1.背景2.需要掌握知识3.需要资料①三菱SDK包&#xff1a;A2②三菱com接口文档③C#代码&#xff1a;④VStudio⑤资料存放网盘 二、程序运行1.调试设备①条件②命令 2.运行软件①打开软件②运行程序 三、数据采集1.代码了解2.…