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. 轻型目录访问协议 ldap 公司内部网站的登录 单点登录

    https://zh.wikipedia.org/wiki/轻型目录访问协议 轻型目录访问协议(英文:Lightweight Directory Access Protocol,缩写:LDAP,/ˈɛ ...

  2. 图的广度优先遍历算法(BFS)

    在上一篇文章我们用java演示了图的数据结构以及图涉及到的深度优先遍历算法,本篇文章将继续演示图的广度优先遍历算法.广度优先遍历算法主要是采用了分层的思想进行数据搜索.其中也需要使用另外一种数据结构队 ...

  3. Java排序算法(四)希尔排序1

    希尔排序交换法:分组+冒泡排序组合 一.测试类SortTest import java.util.Arrays; public class SortTest { private static fina ...

  4. docker(4)解决pull镜像速度缓慢

    前言 上一篇讲到pull 镜像,但是pull镜像的时候下拉的速度实在感人,有什么解决办法吗?我们只需将docker镜像源修改为国内的 将docker镜像源修改为国内的: 在 /etc/docker/d ...

  5. Windows下使用poetry和pyproject.toml

    0. 题引 为什么要使用poetry? 因为想使用pyproject.toml,并通过pyproject.toml进行依赖包管理,目前pip还不支持,所以poetry是首选 为什么要使用pyproje ...

  6. Codeforces Round #651 (Div. 2) C. Number Game(数论)

    题目链接:https://codeforces.com/contest/1370/problem/C 题意 给出一个正整数 $n$,Ashishgup 和 FastestFinger 依次选择执行以下 ...

  7. 【poj 1961】Period(字符串--KMP 模版题)

    题意:给你一个字符串,求这个字符串到第 i 个字符为止的重复子串的个数. 解法:判断重复子串的语句很重要!!if (p && i%(i-p)==0) printf("%d % ...

  8. AtCoder Beginner Contest 173 C - H and V (二进制枚举)

    题意:有一张图,.表示白色,#表示黑色,每次可以将多行和多列涂成红色(也可不涂),问有多少种方案,使得剩下黑点的个数为\(k\). 题解:又学到了新的算法qwq,因为这题的数据范围很小,所以可以用二进 ...

  9. Ubuntu上安装Python3编译器和 Pycharm 集成开发环境

    一.安装python3 (Ubuntu上面是自带python编译器的,可以用命令"python -V"来查看版本号.我下面安装的是pyhton3编译器) 一条命令就可以 sudo ...

  10. spark 一、编程指南

    总览 第一.每个spark 应用都有一个驱动程序去运行着主函数和再每个节点上的并行操作. spark提供了一个RDD(弹性分布式数据集)的数据集合,可以通过不同的节点并行操作运算,可以通过hdfs文件 ...