svg rect to polygon points & points order bug

https://codepen.io/xgqfrms/pen/vYOWjYr?editors=1000

points 数据类型转换 bug, string + string !== number + number

https://codepen.io/xgqfrms/pen/vYOWjYr?editors=1000

error

  const x = rect.getAttribute('x');
const y = rect.getAttribute('y');
const width = rect.getAttribute('width');
const height = rect.getAttribute('height');
const points = [];
points.push(pointGenerator(x, y));
points.push(pointGenerator((x + width), y));
points.push(pointGenerator((x + width), (y + height)));
points.push(pointGenerator(x, (y + height)));

OK

  const x = +rect.getAttribute('x');
const y = +rect.getAttribute('y');
const width = +rect.getAttribute('width');
const height = +rect.getAttribute('height');
const points = [];
points.push(pointGenerator(x, y));
points.push(pointGenerator((x + width), y));
points.push(pointGenerator((x + width), (y + height)));
points.push(pointGenerator(x, (y + height)));

object map to array, order change bug

bug


const pointGenerator = (x, y) => {
// return [
// x,
// y,
// ];
return {
x,
y,
};
} // const points_str = points.flat(2).join(` `);
const points_str = points.map(({x, y}) => [x, y]).flat(2).join(` `);

ok



const pointGenerator = (x, y) => {
return [
x,
y,
];
// return {
// x,
// y,
// };
} const points_str = points.flat(2).join(` `);
// const points_str = points.map(({x, y}) => [x, y]).flat(2).join(` `);

svg rect to polygon points & points order bug的更多相关文章

  1. how to convert SVG shapes to polygon

    how to convert SVG shapes to polygon 如何将 svg 的 rect 转换成 polygon rect.circle.ellipse.line.polyline.po ...

  2. [javascript svg fill stroke stroke-width points polygon属性讲解] svg fill stroke stroke-width points polygon绘制多边形属性并且演示polyline和polygon区别讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  3. how to change svg polygon size by update it's points in js

    how to change svg polygon size by update it's points in js matrixTransform https://stackoverflow.com ...

  4. [javascript svg fill stroke stroke-width points polyline 属性讲解] svg fill stroke stroke-width points polyline 绘制折线属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  5. svg insert shape string bug

    svg insert shape string bug not support custom areaProps attributes ??? const svg = document.querySe ...

  6. [POJ 3788] Interior Points of Lattice Polygons

    同swustoj 169 Interior Points of Lattice Polygons Time Limit: 1000MS   Memory Limit: 65536K Total Sub ...

  7. [Swift]LeetCode973. 最接近原点的 K 个点 | K Closest Points to Origin

    We have a list of points on the plane.  Find the K closest points to the origin (0, 0). (Here, the d ...

  8. SGU 403 Game with points

    408. Game with points Time limit per test: 0.25 second(s)Memory limit: 65536 kilobytes input: standa ...

  9. 【leetcode】Max Points on a Line

    Max Points on a Line 题目描述: Given n points on a 2D plane, find the maximum number of points that lie ...

随机推荐

  1. 本地代码上传GitHub

    0. 登录 git config --global user.name "GitHub用户名" git config --global user.email "GitHu ...

  2. CF413C

    正文 题意: 给 n 个关卡,每个关卡得分为 ai,有 m 次机会可以选择一 个关卡通过后不得分,而将现有得分翻倍 你可以安排关卡的通过顺序和策略,求最大得分. 分析: 看到这道题首先想到的就是贪心, ...

  3. Codeforces 1220D 思维 数学 二分图基础

    原题链接 题意 我们有一个含多个正整数的集合B,然后我们将所有的整数,也就是Z集合内所有元素,都当做顶点 两个整数 \(i , j\) 能建立无向边,当且仅当 \(|i - j|\) 这个数属于B集合 ...

  4. js基础(使用Canvas画图)

    HTML5的元素提供了一组JavaScript API,让我们可以动态地创建图形和图像. 图形是在一个特定的上下文中创建的,而上下文对象目前有两种.第一种是2D上下文,可以执行原始的绘图操作, 比如: ...

  5. MySQL索引的原理,B+树、聚集索引和二级索引

    MySQL索引的原理,B+树.聚集索引和二级索引的结构分析 一.索引类型 1.1 B树 1.2 B+树 1.3 哈希索引 1.4 聚集索引(clusterd index) 1.5 二级索引(secon ...

  6. GeoMesa 环境搭建

    GeoMesa 环境搭建 版本 虚拟机安装 os centos7 Centos安装 CentOS安装Jdk并配置环境变量 hadoop.hbase环境部署 geomesa_hbase部署 geoser ...

  7. vue-cli-----vue实例中template: '<App/>',这样写是什么意思

    我刚开始学,看这个东西看了好久,官网文档的描述我不太理解,今天终于算明白了 官网的描述: 模板将会替换挂载的元素.挂载元素的内容都将被忽略 也就是说:template: '<App/>' ...

  8. H - 看病要排队

    看病要排队这个是地球人都知道的常识.不过经过细心的0068的观察,他发现了医院里排队还是有讲究的.0068所去的医院有三个医生(汗,这么少)同时看病.而看病的人病情有轻重,所以不能根据简单的先来先服务 ...

  9. Codeforces Round #641 (Div. 2)

    只写了A~D A - Orac and Factors 题意:f(n)就是n的第二小因数,问执行k次 n=f(n)+n 后的结果. 题解:如果一直找第二小的因子的话,1e9肯定得t.看下边样例解释就会 ...

  10. SPOJ - PHRASES Relevant Phrases of Annihilation

    传送门:SPOJ - PHRASES(后缀数组+二分) 题意:给你n个字符串,找出一个最长的子串,他必须在每次字符串中都出现至少两次. 题解:被自己蠢哭...记录一下自己憨憨的操作,还一度质疑评测鸡( ...