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. 并发编程:Actors 模型和 CSP 模型

    https://mp.weixin.qq.com/s/emB99CtEVXS4p6tRjJ2xww 并发编程:Actors 模型和 CSP 模型 ImportNew 2017-04-27    

  2. postgresql 知识的整理

    .example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; margin ...

  3. 洛谷P2865

    感觉此题可作为严格次短路的模板,因此来写一写 Description 给定 \(n\) 个点,\(r\) 条双向道路,求从 \(1\) 号点到 \(n\) 号点的严格次短路 Solution 维护两个 ...

  4. Linux常用习惯和技巧

    1.如果有些命令在执行时不断地在屏幕上输出信息,影响到后续命令的输入,则可以在执行命令时在末尾添加上一个&符号,这样命令将进入系统后台来执行.

  5. (14)Linux绝对路径和相对路径

    Linux 系统中,文件是存放在目录中的,而目录又可以存放在其他的目录中,因此,用户(或程序)可以借助文件名和目录名,从文件树中的任何地方开始,搜寻并定位所需的目录或文件. 说明目录或文件名位置的方法 ...

  6. 写了这么多年 JavaScript ,竟然还不知道这些技巧?

    不少人有五年的 JavaScript 经验,但实际上可能只是一年的经验重复用了五次而已.完成同样的逻辑和功能,有人可以写出意大利面条一样的代码,也有人两三行简洁清晰的代码就搞定了.简洁的代码不但方便阅 ...

  7. @AliasFor 注解

    Spring 框架提供了很丰富的注解可以让我们很方便的进行 Spring 配置,今天要讲的注解--@AliasFor之前你可能并没有关注过,因为平时开发时我们的确不太会用到. 我关注到这个注解是因为我 ...

  8. zjnu1749 PAROVI (数位dp)

    Description The distance between two integers is defined as the sum of the absolute result of subtra ...

  9. Codeforces Round #Pi (Div. 2) D. One-Dimensional Battle Ships

    Alice and Bob love playing one-dimensional battle ships. They play on the field in the form of a lin ...

  10. Educational Codeforces Round 94 (Rated for Div. 2) A. String Similarity (构造水题)

    题意:给你一个长度为\(2*n-1\)的字符串\(s\),让你构造一个长度为\(n\)的字符串,使得构造的字符串中有相同位置的字符等于\(s[1..n],s[2..n+1],...,s[n,2n-1] ...