☰

BezierCurveVisibleGenerator

run it and click it

  1. // ==UserScript==
  2. // @name         BezierCurveVisibleGenerator
  3. // @namespace    https://github.com/BokunoMasayume/BezierCurveVisibleGenerator
  4. // @version      1.0
  5. // @description  run it and click it
  6. // @author       BokunoMasayume
  7. // @include      *
  8. // @match        *
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. window.贝塞尔曲线生成监听 = document.addEventListener('keydown', (e)=>{
  13.     if(e.altKey && e.key==='c'){
  14.         document.removeEventListener('keydown', window.贝塞尔曲线生成监听);
  15.        }else{
  16.            return;
  17.        }
  18.     alert("使用贝塞尔曲线生成器");
  19. /******/ (function(modules) { // webpackBootstrap
  20. /******/ 	// The module cache
  21. /******/ 	var installedModules = {};
  22. /******/
  23. /******/ 	// The require function
  24. /******/ 	function __webpack_require__(moduleId) {
  25. /******/
  26. /******/ 		// Check if module is in cache
  27. /******/ 		if(installedModules[moduleId]) {
  28. /******/ 			return installedModules[moduleId].exports;
  29. /******/ 		}
  30. /******/ 		// Create a new module (and put it into the cache)
  31. /******/ 		var module = installedModules[moduleId] = {
  32. /******/ 			i: moduleId,
  33. /******/ 			l: false,
  34. /******/ 			exports: {}
  35. /******/ 		};
  36. /******/
  37. /******/ 		// Execute the module function
  38. /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  39. /******/
  40. /******/ 		// Flag the module as loaded
  41. /******/ 		module.l = true;
  42. /******/
  43. /******/ 		// Return the exports of the module
  44. /******/ 		return module.exports;
  45. /******/ 	}
  46. /******/
  47. /******/
  48. /******/ 	// expose the modules object (__webpack_modules__)
  49. /******/ 	__webpack_require__.m = modules;
  50. /******/
  51. /******/ 	// expose the module cache
  52. /******/ 	__webpack_require__.c = installedModules;
  53. /******/
  54. /******/ 	// define getter function for harmony exports
  55. /******/ 	__webpack_require__.d = function(exports, name, getter) {
  56. /******/ 		if(!__webpack_require__.o(exports, name)) {
  57. /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
  58. /******/ 		}
  59. /******/ 	};
  60. /******/
  61. /******/ 	// define __esModule on exports
  62. /******/ 	__webpack_require__.r = function(exports) {
  63. /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  64. /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  65. /******/ 		}
  66. /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
  67. /******/ 	};
  68. /******/
  69. /******/ 	// create a fake namespace object
  70. /******/ 	// mode & 1: value is a module id, require it
  71. /******/ 	// mode & 2: merge all properties of value into the ns
  72. /******/ 	// mode & 4: return value when already ns object
  73. /******/ 	// mode & 8|1: behave like require
  74. /******/ 	__webpack_require__.t = function(value, mode) {
  75. /******/ 		if(mode & 1) value = __webpack_require__(value);
  76. /******/ 		if(mode & 8) return value;
  77. /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  78. /******/ 		var ns = Object.create(null);
  79. /******/ 		__webpack_require__.r(ns);
  80. /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  81. /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  82. /******/ 		return ns;
  83. /******/ 	};
  84. /******/
  85. /******/ 	// getDefaultExport function for compatibility with non-harmony modules
  86. /******/ 	__webpack_require__.n = function(module) {
  87. /******/ 		var getter = module && module.__esModule ?
  88. /******/ 			function getDefault() { return module['default']; } :
  89. /******/ 			function getModuleExports() { return module; };
  90. /******/ 		__webpack_require__.d(getter, 'a', getter);
  91. /******/ 		return getter;
  92. /******/ 	};
  93. /******/
  94. /******/ 	// Object.prototype.hasOwnProperty.call
  95. /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  96. /******/
  97. /******/ 	// __webpack_public_path__
  98. /******/ 	__webpack_require__.p = "";
  99. /******/
  100. /******/
  101. /******/ 	// Load entry module and return exports
  102. /******/ 	return __webpack_require__(__webpack_require__.s = "./src/main.js");
  103. /******/ })
  104. /************************************************************************/
  105. /******/ ({
  106.  
  107. /***/ "./src/main.js":
  108. /*!*********************!*\
  109.   !*** ./src/main.js ***!
  110.   \*********************/
  111. /*! no static exports found */
  112. /***/ (function(module, exports) {
  113.  
  114. eval("document.body.innerHTML = \"\"; // document.body.style.height = '100%';\n\n/**\r\n * wrap\r\n *  */\n\nvar wrap = document.createElement('div');\nwrap.style.position = \"fixed\";\nwrap.style.top = \"0\";\nwrap.style.left = \"0\";\nwrap.style.right = \"0\";\nwrap.style.bottom = \"0\";\nwrap.style.zIndex = \"999\";\ndocument.body.appendChild(wrap); // wrap.style.backgroundColor = \"red\";\n\n/**\r\n * controller \r\n */\n\nvar controller = document.createElement('div');\ncontroller.style.height = \"80px\";\nwrap.appendChild(controller);\ncontroller.style.backgroundColor = \"blue\";\n/**\r\n * svg\r\n */\n\nvar svg = document.createElementNS(\"http://www.w3.org/2000/svg\", 'svg');\nsvg.setAttribute('width', window.innerWidth);\nsvg.setAttribute('height', window.innerHeight - 80); // svg.style.width = window.innerWidth+\"px\";\n// svg.style.height = window.innerHeight+\"px\";\n\nsvg.setAttribute('viewBox', \"0 0 \" + window.innerWidth + \" \" + (window.innerHeight - 80));\nwrap.appendChild(svg);\nsvg.style.border = \"2px solid black\"; // var testcir = document.createElementNS(\"http://www.w3.org/2000/svg\",'circle');\n// testcir.setAttribute('r', \"100\");\n// testcir.setAttribute(\"cx\",\"200\");\n// testcir.setAttribute(\"cy\",\"300\");\n// svg.appendChild(testcir);\n\n/**\r\n * bezier curve anchor points\r\n * anchors[i] is the attr of i/2 th point\r\n * i%2 ==0  anchors[i] is x attr else is y attr \r\n */\n\nvar anchors = []; // var anchors = [100,100,     150,150,        200,150,    250,200];\n\n/**\r\n * layer points\r\n * 1st dimension is layer\r\n * 2nd dimension is points of this layer\r\n * \r\n * point is{\r\n *      x:\r\n *      y:\r\n *      el:\r\n * }\r\n */\n\nvar layerPoints = [];\n/**\r\n * layer lines\r\n * 1st dimension is layer\r\n * 2nd dimension is lines of this layer\r\n * \r\n * line is{\r\n *      p1:\r\n *      p2:\r\n *      el:\r\n * }\r\n */\n\nvar layerLines = [];\n/**\r\n * timing start\r\n */\n\nvar start,\n    duration = 5000; //5s\n\n/**\r\n * stop animation id\r\n */\n\nvar stopAnimId;\n/**\r\n * path \r\n */\n\nvar path = document.createElementNS(\"http://www.w3.org/2000/svg\", 'path');\npath.setAttribute('d', 'M 0 0 ');\nsvg.appendChild(path);\n/**\r\n * define property\r\n */\n\nfunction cookSVGobj(obj) {\n  Object.defineProperty(obj, 'x', {\n    enumerable: true,\n    configurable: true,\n    set: function set(value) {\n      this.el.setAttribute('cx', value);\n    },\n    get: function get() {\n      return this.el.getAttribute('cx');\n    }\n  });\n  Object.defineProperty(obj, 'y', {\n    enumerable: true,\n    configurable: true,\n    set: function set(value) {\n      this.el.setAttribute('cy', value);\n    },\n    get: function get() {\n      return this.el.getAttribute('cy');\n    }\n  });\n  Object.defineProperty(obj, 'x1', {\n    enumerable: true,\n    configurable: true,\n    set: function set(value) {\n      this.el.setAttribute('x1', value);\n    },\n    get: function get() {\n      return this.el.getAttribute('x1');\n    }\n  });\n  Object.defineProperty(obj, 'y1', {\n    enumerable: true,\n    configurable: true,\n    set: function set(value) {\n      this.el.setAttribute('y1', value);\n    },\n    get: function get() {\n      return this.el.getAttribute('y1');\n    }\n  });\n  Object.defineProperty(obj, 'x2', {\n    enumerable: true,\n    configurable: true,\n    set: function set(value) {\n      this.el.setAttribute('x2', value);\n    },\n    get: function get() {\n      return this.el.getAttribute('x2');\n    }\n  });\n  Object.defineProperty(obj, 'y2', {\n    enumerable: true,\n    configurable: true,\n    set: function set(value) {\n      this.el.setAttribute('y2', value);\n    },\n    get: function get() {\n      return this.el.getAttribute('y2');\n    }\n  });\n}\n/**\r\n * init polys into svg tag\r\n * init layer points and lines\r\n */\n\n\nfunction init() {\n  svg.innerHTML = \"\";\n  path = document.createElementNS(\"http://www.w3.org/2000/svg\", 'path');\n  path.setAttribute('d', \"M \".concat(anchors[anchors.length - 2], \" \").concat(anchors[anchors.length - 1]));\n  path.setAttribute('fill', 'none');\n  path.setAttribute('stroke', 'black');\n  path.setAttribute('stroke-width', '6'); // stroke=\"black\" fill=\"none\"\n\n  svg.appendChild(path);\n  layerPoints = Array.from({\n    length: anchors.length / 2\n  });\n\n  for (var i = 0; i < layerPoints.length; i++) {\n    layerPoints[i] = Array.from({\n      length: i + 1\n    });\n\n    for (var j = 0; j < layerPoints[i].length; j++) {\n      layerPoints[i][j] = {};\n      cookSVGobj(layerPoints[i][j]);\n      layerPoints[i][j].el = document.createElementNS(\"http://www.w3.org/2000/svg\", 'circle');\n      layerPoints[i][j].el.setAttribute('fill', \"rgb(\".concat(Math.floor(Math.random() * 256), \" , \").concat(Math.floor(Math.random() * 256), \" , \").concat(Math.floor(Math.random() * 256), \")\"));\n      layerPoints[i][j].el.setAttribute('r', \"4\");\n      svg.appendChild(layerPoints[i][j].el);\n    }\n  }\n\n  layerLines = Array.from({\n    length: anchors.length / 2\n  });\n\n  for (var _i = 0; _i < layerLines.length; _i++) {\n    layerLines[_i] = Array.from({\n      length: _i\n    });\n\n    for (var _j = 0; _j < layerLines[_i].length; _j++) {\n      layerLines[_i][_j] = {};\n      cookSVGobj(layerLines[_i][_j]);\n      layerLines[_i][_j].el = document.createElementNS(\"http://www.w3.org/2000/svg\", 'line');\n\n      layerLines[_i][_j].el.setAttribute('stroke', \"rgb(\".concat(Math.floor(Math.random() * 256), \" , \").concat(Math.floor(Math.random() * 256), \" , \").concat(Math.floor(Math.random() * 256), \")\")); // layerLines[i][j].x1 = layerPoints[i][j].x;\n      // layerLines[i][j].y1 = layerPoints[i][j].y;\n      // layerLines[i][j].x2 = layerPoints[i][j+1].x;\n      // layerLines[i][j].y2 = layerPoints[i][j+1].y;\n\n\n      svg.appendChild(layerLines[_i][_j].el);\n    }\n  }\n}\n\nfunction render() {\n  var t = (new Date().getTime() - start) / duration; // console.log(t)\n\n  if (t > 1) return;\n  var anc = anchors.slice();\n\n  for (var i = 0; i < anc.length / 2; i++) {\n    layerPoints[anc.length / 2 - 1][i].x = anc[i * 2];\n    layerPoints[anc.length / 2 - 1][i].y = anc[i * 2 + 1];\n\n    if (i > 0) {\n      layerLines[anc.length / 2 - 1][i - 1].x1 = layerPoints[anc.length / 2 - 1][i - 1].x;\n      layerLines[anc.length / 2 - 1][i - 1].y1 = layerPoints[anc.length / 2 - 1][i - 1].y;\n      layerLines[anc.length / 2 - 1][i - 1].x2 = layerPoints[anc.length / 2 - 1][i].x;\n      layerLines[anc.length / 2 - 1][i - 1].y2 = layerPoints[anc.length / 2 - 1][i].y;\n    }\n  }\n\n  for (var _i2 = anc.length / 2 - 2; _i2 >= 0; _i2--) {\n    for (var j = 0; j <= _i2; j++) {\n      layerPoints[_i2][j].x = t * layerPoints[_i2 + 1][j].x + (1 - t) * layerPoints[_i2 + 1][j + 1].x;\n      layerPoints[_i2][j].y = t * layerPoints[_i2 + 1][j].y + (1 - t) * layerPoints[_i2 + 1][j + 1].y;\n\n      if (j > 0) {\n        layerLines[_i2][j - 1].x1 = layerPoints[_i2][j - 1].x;\n        layerLines[_i2][j - 1].y1 = layerPoints[_i2][j - 1].y;\n        layerLines[_i2][j - 1].x2 = layerPoints[_i2][j].x;\n        layerLines[_i2][j - 1].y2 = layerPoints[_i2][j].y;\n      }\n    }\n  }\n\n  path.setAttribute('d', path.getAttribute('d') + \"L \".concat(layerPoints[0][0].x, \" \").concat(layerPoints[0][0].y, \" \"));\n  stopAnimId = requestAnimationFrame(render);\n}\n\nsvg.onclick = function (e) {\n  if (stopAnimId) cancelAnimationFrame(stopAnimId);\n  anchors.push(e.offsetX);\n  anchors.push(e.offsetY);\n  init();\n  start = new Date().getTime();\n  stopAnimId = requestAnimationFrame(render);\n}; // init();\n// start = new Date().getTime();\n// stopAnimId = requestAnimationFrame(render);\n// console.log(layerPoints);\n// console.log(layerLines);\n\n//# sourceURL=webpack:///./src/main.js?");
  115.  
  116. /***/ })
  117.  
  118. /******/ })
  119.  
  120. });