Skip to content

W
wangjin-front-end
Commit bc2e268c authored by 张媛's avatar 张媛
Browse files
Options

canvas测试

parent 7809f04d
Hide whitespace changes
Inline Side-by-side
Showing with 1271 additions and 47 deletions
.storybook/addons.ts deleted 100644 → 0
View file @ 7809f04d
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';
import 'storybook-readme/register';
\ No newline at end of file
.storybook/main.js
View file @ bc2e268c
module.exports = {
stories: ['../src/**/*.stories.tsx'],
addons:[
"@storybook/addon-essentials",
"@storybook/addon-info"
]
};
\ No newline at end of file
.storybook/manager.js 0 → 100644
View file @ bc2e268c
// .storybook/manager.js
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
addons.setConfig({
isFullscreen: false,
showNav: true,
showPanel: true,
panelPosition: 'bottom',
enableShortcuts: true,
isToolshown: true,
theme: themes.dark,
selectedPanel: undefined,
initialActive: 'sidebar',
sidebar: {
showRoots: false,
collapsedRoots: ['other'],
},
toolbar: {
title: { hidden: false, },
zoom: { hidden: false, },
eject: { hidden: false, },
copy: { hidden: false, },
fullscreen: { hidden: false, },
},
});
\ No newline at end of file
.storybook/preview-body.html 0 → 100644
View file @ bc2e268c
<!-- .storybook/preview-body.html -->
<!-- 渲染引擎 -->
<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2023z.minSpine.js" crossorigin="anonymous"></script>
<canvas id="canvas-container"></canvas>
<style>
html {
font-size: 15px;
}
</style>
<script>
window.FYGE = FYGE;
</script>
<script>
window.addEventListener("load", function () {
let canvas = document.getElementById("canvas-container")
canvas.style.height = document.body.clientHeight*(window.devicePixelRatio || 1)+"px";
canvas.style.width = document.body.clientWidth*(window.devicePixelRatio || 1)+"px";
console.log(window.devicePixelRatio)
console.log( document.body.clientWidth, document.body.clientHeight);
var stage = new FYGE.Stage(
canvas,
750,
1624,
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.CANVAS,
false,
false
)
//点击事件绑定
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart",mouseEvent,false);
canvas.addEventListener("touchmove",mouseEvent,false);
canvas.addEventListener("touchend",mouseEvent,false);
canvas.addEventListener("click",mouseEvent,false);
function loop() {
stage.flush();
FYGE.Tween.flush();
requestAnimationFrame(loop);
}
loop();
window.stage = stage;
})
</script>
.storybook/preview.js 0 → 100644
View file @ bc2e268c
import { themes } from '@storybook/theming';
const customViewports = {
kindleFire2: {
name: 'Kindle Fire 2',
styles: {
width: '600px',
height: '963px',
},
},
kindleFireHD: {
name: 'Kindle Fire HD',
styles: {
width: '750px',
height: '1624px',
},
},
};
export const parameters = {
layout: 'fullscreen',
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
docs: {
theme: themes.dark,
},
viewport: { viewports: customViewports },
};
\ No newline at end of file
package-lock.json
View file @ bc2e268c
......@@ -1244,6 +1244,11 @@
"regenerator-runtime": "^0.13.4"
}
},
"@babel/standalone": {
"version": "7.14.7",
"resolved": "http://npm.dui88.com:80/@babel%2fstandalone/-/standalone-7.14.7.tgz",
"integrity": "sha1-aGNdoAXWo0oCWVmeByDS5zEz7MM="
},
"@babel/template": {
"version": "7.14.5",
"resolved": "http://npm.dui88.com:80/@babel%2ftemplate/-/template-7.14.5.tgz",
......@@ -1439,7 +1444,6 @@
"version": "0.3.1",
"resolved": "http://npm.dui88.com:80/@hypnosphi%2fcreate-react-context/-/create-react-context-0.3.1.tgz",
"integrity": "sha1-+L/r3HZl9dQmy6N1Pg6cfTFU18Y=",
"dev": true,
"requires": {
"gud": "^1.0.0",
"warning": "^4.0.3"
......@@ -1707,6 +1711,42 @@
"uuid-browser": "^3.1.0"
}
},
"@storybook/addon-backgrounds": {
"version": "6.3.2",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-backgrounds/-/addon-backgrounds-6.3.2.tgz",
"integrity": "sha1-ppd18C0zN4mI24yCEWl3ZOvqHSU=",
"dev": true,
"requires": {
"@storybook/addons": "6.3.2",
"@storybook/api": "6.3.2",
"@storybook/client-logger": "6.3.2",
"@storybook/components": "6.3.2",
"@storybook/core-events": "6.3.2",
"@storybook/theming": "6.3.2",
"core-js": "^3.8.2",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
"regenerator-runtime": "^0.13.7",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2"
}
},
"@storybook/addon-controls": {
"version": "6.3.2",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-controls/-/addon-controls-6.3.2.tgz",
"integrity": "sha1-Lgzcf8wyZSTFhYGI1LnUW8VHPEg=",
"dev": true,
"requires": {
"@storybook/addons": "6.3.2",
"@storybook/api": "6.3.2",
"@storybook/client-api": "6.3.2",
"@storybook/components": "6.3.2",
"@storybook/node-logger": "6.3.2",
"@storybook/theming": "6.3.2",
"core-js": "^3.8.2",
"ts-dedent": "^2.0.0"
}
},
"@storybook/addon-docs": {
"version": "6.3.2",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-docs/-/addon-docs-6.3.2.tgz",
......@@ -1773,6 +1813,353 @@
}
}
},
"@storybook/addon-essentials": {
"version": "6.3.2",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-essentials/-/addon-essentials-6.3.2.tgz",
"integrity": "sha1-IYL828MTj9F+EOaA1umxgr5z4+w=",
"dev": true,
"requires": {
"@storybook/addon-actions": "6.3.2",
"@storybook/addon-backgrounds": "6.3.2",
"@storybook/addon-controls": "6.3.2",
"@storybook/addon-docs": "6.3.2",
"@storybook/addon-measure": "^2.0.0",
"@storybook/addon-toolbars": "6.3.2",
"@storybook/addon-viewport": "6.3.2",
"@storybook/addons": "6.3.2",
"@storybook/api": "6.3.2",
"@storybook/node-logger": "6.3.2",
"core-js": "^3.8.2",
"regenerator-runtime": "^0.13.7",
"storybook-addon-outline": "^1.4.1",
"ts-dedent": "^2.0.0"
}
},
"@storybook/addon-info": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-info/-/addon-info-5.3.21.tgz",
"integrity": "sha1-/I/WHQRx9HQ7MvWujlt8hLUv8RI=",
"requires": {
"@storybook/addons": "5.3.21",
"@storybook/client-logger": "5.3.21",
"@storybook/components": "5.3.21",
"@storybook/theming": "5.3.21",
"core-js": "^3.0.1",
"global": "^4.3.2",
"marksy": "^8.0.0",
"nested-object-assign": "^1.0.3",
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-addons-create-fragment": "^15.6.2",
"react-element-to-jsx-string": "^14.0.2",
"react-is": "^16.8.3",
"react-lifecycles-compat": "^3.0.4",
"util-deprecate": "^1.0.2"
},
"dependencies": {
"@storybook/addons": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2faddons/-/addons-5.3.21.tgz",
"integrity": "sha1-7jEsc4wz6MNNwRd375NSLDw25Wo=",
"requires": {
"@storybook/api": "5.3.21",
"@storybook/channels": "5.3.21",
"@storybook/client-logger": "5.3.21",
"@storybook/core-events": "5.3.21",
"core-js": "^3.0.1",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"
}
},
"@storybook/api": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2fapi/-/api-5.3.21.tgz",
"integrity": "sha1-jxdy3lO2Xhpl0vAldGPWIahhfFg=",
"requires": {
"@reach/router": "^1.2.1",
"@storybook/channels": "5.3.21",
"@storybook/client-logger": "5.3.21",
"@storybook/core-events": "5.3.21",
"@storybook/csf": "0.0.1",
"@storybook/router": "5.3.21",
"@storybook/theming": "5.3.21",
"@types/reach__router": "^1.2.3",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",
"lodash": "^4.17.15",
"memoizerific": "^1.11.3",
"prop-types": "^15.6.2",
"react": "^16.8.3",
"semver": "^6.0.0",
"shallow-equal": "^1.1.0",
"store2": "^2.7.1",
"telejson": "^3.2.0",
"util-deprecate": "^1.0.2"
}
},
"@storybook/channels": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2fchannels/-/channels-5.3.21.tgz",
"integrity": "sha1-U7piKxcdaLOxApg6YqoFFJpJSXs=",
"requires": {
"core-js": "^3.0.1"
}
},
"@storybook/client-logger": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2fclient-logger/-/client-logger-5.3.21.tgz",
"integrity": "sha1-kSyDsNNY5wrK0a1Kvhmd5MOLEJ8=",
"requires": {
"core-js": "^3.0.1"
}
},
"@storybook/components": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2fcomponents/-/components-5.3.21.tgz",
"integrity": "sha1-F+43GiRVxugHw9MTWpJm5jrXZRo=",
"requires": {
"@storybook/client-logger": "5.3.21",
"@storybook/theming": "5.3.21",
"@types/react-syntax-highlighter": "11.0.4",
"@types/react-textarea-autosize": "^4.3.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"lodash": "^4.17.15",
"markdown-to-jsx": "^6.11.4",
"memoizerific": "^1.11.3",
"polished": "^3.3.1",
"popper.js": "^1.14.7",
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-focus-lock": "^2.1.0",
"react-helmet-async": "^1.0.2",
"react-popper-tooltip": "^2.8.3",
"react-syntax-highlighter": "^11.0.2",
"react-textarea-autosize": "^7.1.0",
"simplebar-react": "^1.0.0-alpha.6",
"ts-dedent": "^1.1.0"
}
},
"@storybook/core-events": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2fcore-events/-/core-events-5.3.21.tgz",
"integrity": "sha1-QdgcPxBzAqAyVF/Ib/NEIwwEuek=",
"requires": {
"core-js": "^3.0.1"
}
},
"@storybook/router": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2frouter/-/router-5.3.21.tgz",
"integrity": "sha1-MrCOXaqQpv+gJLtnC4dFJacSqQE=",
"requires": {
"@reach/router": "^1.2.1",
"@storybook/csf": "0.0.1",
"@types/reach__router": "^1.2.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"lodash": "^4.17.15",
"memoizerific": "^1.11.3",
"qs": "^6.6.0",
"util-deprecate": "^1.0.2"
}
},
"@storybook/theming": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2ftheming/-/theming-5.3.21.tgz",
"integrity": "sha1-ri3BAapXw75N8XJK5ynhG60Rjgs=",
"requires": {
"@emotion/core": "^10.0.20",
"@emotion/styled": "^10.0.17",
"@storybook/client-logger": "5.3.21",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
"polished": "^3.3.1",
"prop-types": "^15.7.2",
"resolve-from": "^5.0.0",
"ts-dedent": "^1.1.0"
}
},
"@types/react-syntax-highlighter": {
"version": "11.0.4",
"resolved": "http://npm.dui88.com:80/@types%2freact-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz",
"integrity": "sha1-2G0XaX22L5gEaHT2L9s+U6C7xM0=",
"requires": {
"@types/react": "*"
}
},
"fast-deep-equal": {
"version": "2.0.1",
"resolved": "http://npm.dui88.com:80/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
},
"hastscript": {
"version": "5.1.2",
"resolved": "http://npm.dui88.com:80/hastscript/-/hastscript-5.1.2.tgz",
"integrity": "sha1-veLC5W0Exi3SToxd8ojQUKNV+4o=",
"requires": {
"comma-separated-tokens": "^1.0.0",
"hast-util-parse-selector": "^2.0.0",
"property-information": "^5.0.0",
"space-separated-tokens": "^1.0.0"
}
},
"highlight.js": {
"version": "9.13.1",
"resolved": "http://npm.dui88.com:80/highlight.js/-/highlight.js-9.13.1.tgz",
"integrity": "sha1-BUWG1TpoYzERaEiKD1jWxQXOZB4="
},
"lowlight": {
"version": "1.11.0",
"resolved": "http://npm.dui88.com:80/lowlight/-/lowlight-1.11.0.tgz",
"integrity": "sha1-EwTYMAUSbU6LHcDweYHptonsLvw=",
"requires": {
"fault": "^1.0.2",
"highlight.js": "~9.13.0"
}
},
"parse-entities": {
"version": "1.2.2",
"resolved": "http://npm.dui88.com:80/parse-entities/-/parse-entities-1.2.2.tgz",
"integrity": "sha1-wxvw9lO2ZhNU+Jc1WcuG3R1e31A=",
"requires": {
"character-entities": "^1.0.0",
"character-entities-legacy": "^1.0.0",
"character-reference-invalid": "^1.0.0",
"is-alphanumerical": "^1.0.0",
"is-decimal": "^1.0.0",
"is-hexadecimal": "^1.0.0"
}
},
"polished": {
"version": "3.7.2",
"resolved": "http://npm.dui88.com:80/polished/-/polished-3.7.2.tgz",
"integrity": "sha1-7F3cF6fTIqV01eEN3SpvAdPnZ9E=",
"requires": {
"@babel/runtime": "^7.12.5"
}
},
"react": {
"version": "16.14.0",
"resolved": "http://npm.dui88.com:80/react/-/react-16.14.0.tgz",
"integrity": "sha1-lNd23dCqo32j7aj8W2sYpMmjEU0=",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
}
},
"react-dom": {
"version": "16.14.0",
"resolved": "http://npm.dui88.com:80/react-dom/-/react-dom-16.14.0.tgz",
"integrity": "sha1-etg47Cmnd/s8dcOhkPZhz5Kri4k=",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"scheduler": "^0.19.1"
}
},
"react-popper": {
"version": "1.3.11",
"resolved": "http://npm.dui88.com:80/react-popper/-/react-popper-1.3.11.tgz",
"integrity": "sha1-osw/Cme3W2bPpi0sQJ+d0fzHH/0=",
"requires": {
"@babel/runtime": "^7.1.2",
"@hypnosphi/create-react-context": "^0.3.1",
"deep-equal": "^1.1.1",
"popper.js": "^1.14.4",
"prop-types": "^15.6.1",
"typed-styles": "^0.0.7",
"warning": "^4.0.2"
}
},
"react-popper-tooltip": {
"version": "2.11.1",
"resolved": "http://npm.dui88.com:80/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz",
"integrity": "sha1-PEvf2LwQ0cK5oWLoWbq4lY9bJkQ=",
"requires": {
"@babel/runtime": "^7.9.2",
"react-popper": "^1.3.7"
}
},
"react-syntax-highlighter": {
"version": "11.0.2",
"resolved": "http://npm.dui88.com:80/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz",
"integrity": "sha1-Tj83bnUrINL1TkxVZS/WYxSeQCk=",
"requires": {
"@babel/runtime": "^7.3.1",
"highlight.js": "~9.13.0",
"lowlight": "~1.11.0",
"prismjs": "^1.8.4",
"refractor": "^2.4.1"
}
},
"react-textarea-autosize": {
"version": "7.1.2",
"resolved": "http://npm.dui88.com:80/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz",
"integrity": "sha1-cP2zM++GvMpycX4l5iPpDDNuLNo=",
"requires": {
"@babel/runtime": "^7.1.2",
"prop-types": "^15.6.0"
}
},
"refractor": {
"version": "2.10.1",
"resolved": "http://npm.dui88.com:80/refractor/-/refractor-2.10.1.tgz",
"integrity": "sha1-Fmwy8RTtFv2WGQrSHVGT06/H004=",
"requires": {
"hastscript": "^5.0.0",
"parse-entities": "^1.1.2",
"prismjs": "~1.17.0"
},
"dependencies": {
"prismjs": {
"version": "1.17.1",
"resolved": "http://npm.dui88.com:80/prismjs/-/prismjs-1.17.1.tgz",
"integrity": "sha1-5mn8vUzdhzw1ECiBwzsU0NaFGb4=",
"requires": {
"clipboard": "^2.0.0"
}
}
}
},
"scheduler": {
"version": "0.19.1",
"resolved": "http://npm.dui88.com:80/scheduler/-/scheduler-0.19.1.tgz",
"integrity": "sha1-Tz4u0sGn1laB9MhU+oxaHMtA8ZY=",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
},
"telejson": {
"version": "3.3.0",
"resolved": "http://npm.dui88.com:80/telejson/-/telejson-3.3.0.tgz",
"integrity": "sha1-bYFPPA0lTVxHcAharQY+JmtWrQM=",
"requires": {
"@types/is-function": "^1.0.0",
"global": "^4.4.0",
"is-function": "^1.0.1",
"is-regex": "^1.0.4",
"is-symbol": "^1.0.3",
"isobject": "^4.0.0",
"lodash": "^4.17.15",
"memoizerific": "^1.11.3"
}
},
"ts-dedent": {
"version": "1.2.0",
"resolved": "http://npm.dui88.com:80/ts-dedent/-/ts-dedent-1.2.0.tgz",
"integrity": "sha1-aqIinYNxWbttY1trIzACQjuR4LA="
}
}
},
"@storybook/addon-links": {
"version": "6.3.2",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-links/-/addon-links-6.3.2.tgz",
......@@ -1793,6 +2180,12 @@
"ts-dedent": "^2.0.0"
}
},
"@storybook/addon-measure": {
"version": "2.0.0",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-measure/-/addon-measure-2.0.0.tgz",
"integrity": "sha1-xAu+kbrNP3lZY9we5v+Gvofe7ak=",
"dev": true
},
"@storybook/addon-notes": {
"version": "5.3.21",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-notes/-/addon-notes-5.3.21.tgz",
......@@ -2143,6 +2536,40 @@
}
}
},
"@storybook/addon-toolbars": {
"version": "6.3.2",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-toolbars/-/addon-toolbars-6.3.2.tgz",
"integrity": "sha1-utUYXHZBeSAFlNmm3YbJ5DVWlio=",
"dev": true,
"requires": {
"@storybook/addons": "6.3.2",
"@storybook/api": "6.3.2",
"@storybook/client-api": "6.3.2",
"@storybook/components": "6.3.2",
"@storybook/theming": "6.3.2",
"core-js": "^3.8.2",
"regenerator-runtime": "^0.13.7"
}
},
"@storybook/addon-viewport": {
"version": "6.3.2",
"resolved": "http://npm.dui88.com:80/@storybook%2faddon-viewport/-/addon-viewport-6.3.2.tgz",
"integrity": "sha1-eo9rkbp9iqs/JGEeSWKzF+7MF9Q=",
"dev": true,
"requires": {
"@storybook/addons": "6.3.2",
"@storybook/api": "6.3.2",
"@storybook/client-logger": "6.3.2",
"@storybook/components": "6.3.2",
"@storybook/core-events": "6.3.2",
"@storybook/theming": "6.3.2",
"core-js": "^3.8.2",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
"prop-types": "^15.7.2",
"regenerator-runtime": "^0.13.7"
}
},
"@storybook/addons": {
"version": "6.3.2",
"resolved": "http://npm.dui88.com:80/@storybook%2faddons/-/addons-6.3.2.tgz",
......@@ -3435,7 +3862,6 @@
"version": "4.3.5",
"resolved": "http://npm.dui88.com:80/@types%2freact-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz",
"integrity": "sha1-bE0nU/oYZMmMCytRf2e7H25MRt4=",
"dev": true,
"requires": {
"@types/react": "*"
}
......@@ -4028,6 +4454,11 @@
"resolved": "http://npm.dui88.com:80/arrify/-/arrify-2.0.1.tgz",
"integrity": "sha1-yWVekzHgq81YjSp8rX6ZVvZnAfo="
},
"asap": {
"version": "2.0.6",
"resolved": "http://npm.dui88.com:80/asap/-/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
},
"asn1.js": {
"version": "5.4.1",
"resolved": "http://npm.dui88.com:80/asn1.js/-/asn1.js-5.4.1.tgz",
......@@ -5161,8 +5592,7 @@
"can-use-dom": {
"version": "0.1.0",
"resolved": "http://npm.dui88.com:80/can-use-dom/-/can-use-dom-0.1.0.tgz",
"integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=",
"dev": true
"integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
},
"caniuse-lite": {
"version": "1.0.30001241",
......@@ -5348,7 +5778,6 @@
"version": "2.0.8",
"resolved": "http://npm.dui88.com:80/clipboard/-/clipboard-2.0.8.tgz",
"integrity": "sha1-/8bBA90pZ6gwBfP2GXaqRlWkzbo=",
"dev": true,
"optional": true,
"requires": {
"good-listener": "^1.2.2",
......@@ -6164,7 +6593,6 @@
"version": "1.1.1",
"resolved": "http://npm.dui88.com:80/deep-equal/-/deep-equal-1.1.1.tgz",
"integrity": "sha1-tcmMlCzv+vfLBR4k4UNKJaLmB2o=",
"dev": true,
"requires": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
......@@ -6248,7 +6676,6 @@
"version": "3.2.0",
"resolved": "http://npm.dui88.com:80/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha1-tmtxwxWFIuirV0T3INjKDCr1kWY=",
"dev": true,
"optional": true
},
"delegates": {
......@@ -6286,8 +6713,7 @@
"detect-node-es": {
"version": "1.1.0",
"resolved": "http://npm.dui88.com:80/detect-node-es/-/detect-node-es-1.1.0.tgz",
"integrity": "sha1-FjrN9kMzDKoLTNfCHn7ndV1vpJM=",
"dev": true
"integrity": "sha1-FjrN9kMzDKoLTNfCHn7ndV1vpJM="
},
"detect-port": {
"version": "1.3.0",
......@@ -6542,6 +6968,24 @@
"resolved": "http://npm.dui88.com:80/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
},
"encoding": {
"version": "0.1.13",
"resolved": "http://npm.dui88.com:80/encoding/-/encoding-0.1.13.tgz",
"integrity": "sha1-VldK/deR9UqOmyeFwFgqLSYhD6k=",
"requires": {
"iconv-lite": "^0.6.2"
},
"dependencies": {
"iconv-lite": {
"version": "0.6.3",
"resolved": "http://npm.dui88.com:80/iconv-lite/-/iconv-lite-0.6.3.tgz",
"integrity": "sha1-pS+AvzjaGVLrXGgXkHGYcaGnJQE=",
"requires": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
}
}
}
},
"end-of-stream": {
"version": "1.4.4",
"resolved": "http://npm.dui88.com:80/end-of-stream/-/end-of-stream-1.4.4.tgz",
......@@ -7106,6 +7550,27 @@
"bser": "2.1.1"
}
},
"fbjs": {
"version": "0.8.17",
"resolved": "http://npm.dui88.com:80/fbjs/-/fbjs-0.8.17.tgz",
"integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
"requires": {
"core-js": "^1.0.0",
"isomorphic-fetch": "^2.1.1",
"loose-envify": "^1.0.0",
"object-assign": "^4.1.0",
"promise": "^7.1.1",
"setimmediate": "^1.0.5",
"ua-parser-js": "^0.7.18"
},
"dependencies": {
"core-js": {
"version": "1.2.7",
"resolved": "http://npm.dui88.com:80/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
}
}
},
"figgy-pudding": {
"version": "3.5.2",
"resolved": "http://npm.dui88.com:80/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
......@@ -7296,7 +7761,6 @@
"version": "0.9.1",
"resolved": "http://npm.dui88.com:80/focus-lock/-/focus-lock-0.9.1.tgz",
"integrity": "sha1-6Ox9SCFjERIZOuCSWBB/UxWI2gE=",
"dev": true,
"requires": {
"tslib": "^2.0.3"
}
......@@ -7803,7 +8267,6 @@
"version": "1.2.2",
"resolved": "http://npm.dui88.com:80/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"dev": true,
"optional": true,
"requires": {
"delegate": "^3.1.2"
......@@ -8732,6 +9195,26 @@
"resolved": "http://npm.dui88.com:80/isobject/-/isobject-4.0.0.tgz",
"integrity": "sha1-PxyRVec7GSAiqAgZus0DQ3EWl7A="
},
"isomorphic-fetch": {
"version": "2.2.1",
"resolved": "http://npm.dui88.com:80/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
"integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
"requires": {
"node-fetch": "^1.0.1",
"whatwg-fetch": ">=0.10.0"
},
"dependencies": {
"node-fetch": {
"version": "1.7.3",
"resolved": "http://npm.dui88.com:80/node-fetch/-/node-fetch-1.7.3.tgz",
"integrity": "sha1-mA9vcthSEaU0fGsrwYxbhMPrR+8=",
"requires": {
"encoding": "^0.1.11",
"is-stream": "^1.0.1"
}
}
}
},
"istanbul-lib-coverage": {
"version": "3.0.0",
"resolved": "http://npm.dui88.com:80/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
......@@ -9065,14 +9548,12 @@
"lodash.memoize": {
"version": "4.1.2",
"resolved": "http://npm.dui88.com:80/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
},
"lodash.throttle": {
"version": "4.1.1",
"resolved": "http://npm.dui88.com:80/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=",
"dev": true
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
},
"lodash.toarray": {
"version": "4.4.0",
......@@ -9212,6 +9693,23 @@
"integrity": "sha1-tkIB8FHScbHtwQoE0a6bdLuOXA4=",
"dev": true
},
"marksy": {
"version": "8.0.0",
"resolved": "http://npm.dui88.com:80/marksy/-/marksy-8.0.0.tgz",
"integrity": "sha1-tZXxIf1HBY353aFEj27hVqtIgQo=",
"requires": {
"@babel/standalone": "^7.4.5",
"he": "^1.2.0",
"marked": "^0.3.12"
},
"dependencies": {
"marked": {
"version": "0.3.19",
"resolved": "http://npm.dui88.com:80/marked/-/marked-0.3.19.tgz",
"integrity": "sha1-XUf3CcTJ/Dwha21GEnKA9As515A="
}
}
},
"md5.js": {
"version": "1.3.5",
"resolved": "http://npm.dui88.com:80/md5.js/-/md5.js-1.3.5.tgz",
......@@ -9587,6 +10085,11 @@
"resolved": "http://npm.dui88.com:80/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz",
"integrity": "sha1-D73PPhP+SZR4EoBST4uWsM3/nGE="
},
"nested-object-assign": {
"version": "1.0.4",
"resolved": "http://npm.dui88.com:80/nested-object-assign/-/nested-object-assign-1.0.4.tgz",
"integrity": "sha1-ydtWB462BDlg/ba6kYpRIqBsysQ="
},
"nice-try": {
"version": "1.0.5",
"resolved": "http://npm.dui88.com:80/nice-try/-/nice-try-1.0.5.tgz",
......@@ -9783,7 +10286,6 @@
"version": "1.1.5",
"resolved": "http://npm.dui88.com:80/object-is/-/object-is-1.1.5.tgz",
"integrity": "sha1-ud7qpfx/GEag+uzc7sE45XePU6w=",
"dev": true,
"requires": {
"call-bind": "^1.0.2",
"define-properties": "^1.1.3"
......@@ -10294,8 +10796,7 @@
"popper.js": {
"version": "1.16.1",
"resolved": "http://npm.dui88.com:80/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha1-KiI8s9x7YhPXQOQDcr5A3kPmWxs=",
"dev": true
"integrity": "sha1-KiI8s9x7YhPXQOQDcr5A3kPmWxs="
},
"posix-character-classes": {
"version": "0.1.1",
......@@ -10507,6 +11008,14 @@
"resolved": "http://npm.dui88.com:80/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
"integrity": "sha1-eCDZsWEgzFXKmud5JoCufbptf+I="
},
"promise": {
"version": "7.3.1",
"resolved": "http://npm.dui88.com:80/promise/-/promise-7.3.1.tgz",
"integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
"requires": {
"asap": "~2.0.3"
}
},
"promise-inflight": {
"version": "1.0.1",
"resolved": "http://npm.dui88.com:80/promise-inflight/-/promise-inflight-1.0.1.tgz",
......@@ -11087,11 +11596,20 @@
"object-assign": "^4.1.1"
}
},
"react-addons-create-fragment": {
"version": "15.6.2",
"resolved": "http://npm.dui88.com:80/react-addons-create-fragment/-/react-addons-create-fragment-15.6.2.tgz",
"integrity": "sha1-o5TefCx77Na1R1uhuXrEcs58dPg=",
"requires": {
"fbjs": "^0.8.4",
"loose-envify": "^1.3.1",
"object-assign": "^4.1.0"
}
},
"react-clientside-effect": {
"version": "1.2.5",
"resolved": "http://npm.dui88.com:80/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz",
"integrity": "sha1-4sTcPJ7hCfZC+sT1tum/W80iGaM=",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.13"
}
......@@ -11342,7 +11860,6 @@
"version": "2.5.1",
"resolved": "http://npm.dui88.com:80/react-focus-lock/-/react-focus-lock-2.5.1.tgz",
"integrity": "sha1-4gYMXXsCxi15xPED0PxaEoi8j3U=",
"dev": true,
"requires": {
"@babel/runtime": "^7.0.0",
"focus-lock": "^0.9.1",
......@@ -12061,7 +12578,6 @@
"version": "1.1.2",
"resolved": "http://npm.dui88.com:80/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
"dev": true,
"optional": true
},
"semver": {
......@@ -12200,8 +12716,7 @@
"shallow-equal": {
"version": "1.2.1",
"resolved": "http://npm.dui88.com:80/shallow-equal/-/shallow-equal-1.2.1.tgz",
"integrity": "sha1-TBar+lYEOqINBQMk76aJQLDaedo=",
"dev": true
"integrity": "sha1-TBar+lYEOqINBQMk76aJQLDaedo="
},
"shallowequal": {
"version": "1.1.0",
......@@ -12245,7 +12760,6 @@
"version": "4.2.3",
"resolved": "http://npm.dui88.com:80/simplebar/-/simplebar-4.2.3.tgz",
"integrity": "sha1-2sQKztKZwXkoMp6rPV5ueV+vwQw=",
"dev": true,
"requires": {
"can-use-dom": "^0.1.0",
"core-js": "^3.0.1",
......@@ -12259,7 +12773,6 @@
"version": "1.2.3",
"resolved": "http://npm.dui88.com:80/simplebar-react/-/simplebar-react-1.2.3.tgz",
"integrity": "sha1-vYH6mCdihHDpRw0Gyu9uzhXhyII=",
"dev": true,
"requires": {
"prop-types": "^15.6.1",
"simplebar": "^4.2.3"
......@@ -12535,6 +13048,19 @@
"resolved": "http://npm.dui88.com:80/store2/-/store2-2.12.0.tgz",
"integrity": "sha1-4fG34aWbYIOyWWqNBn9u6I/U088="
},
"storybook-addon-outline": {
"version": "1.4.1",
"resolved": "http://npm.dui88.com:80/storybook-addon-outline/-/storybook-addon-outline-1.4.1.tgz",
"integrity": "sha1-ChsmK5xl30P8YzCKH9vUKDw9lFg=",
"dev": true,
"requires": {
"@storybook/addons": "^6.3.0",
"@storybook/api": "^6.3.0",
"@storybook/components": "^6.3.0",
"@storybook/core-events": "^6.3.0",
"ts-dedent": "^2.1.1"
}
},
"storybook-readme": {
"version": "5.0.9",
"resolved": "http://npm.dui88.com:80/storybook-readme/-/storybook-readme-5.0.9.tgz",
......@@ -13248,7 +13774,6 @@
"version": "2.1.0",
"resolved": "http://npm.dui88.com:80/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM=",
"dev": true,
"optional": true
},
"tmpl": {
......@@ -13378,8 +13903,7 @@
"typed-styles": {
"version": "0.0.7",
"resolved": "http://npm.dui88.com:80/typed-styles/-/typed-styles-0.0.7.tgz",
"integrity": "sha1-kzkqAIeUxFlRGf9i3eaAnbxAo9k=",
"dev": true
"integrity": "sha1-kzkqAIeUxFlRGf9i3eaAnbxAo9k="
},
"typedarray": {
"version": "0.0.6",
......@@ -13400,6 +13924,11 @@
"integrity": "sha1-TRw3zBbok5c8RaBohrcRMjTxGfQ=",
"dev": true
},
"ua-parser-js": {
"version": "0.7.28",
"resolved": "http://npm.dui88.com:80/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
"integrity": "sha1-i6BOZT81ziECOcZGYWhb+RId7DE="
},
"uglify-js": {
"version": "3.4.10",
"resolved": "http://npm.dui88.com:80/uglify-js/-/uglify-js-3.4.10.tgz",
......@@ -13709,8 +14238,7 @@
"use-callback-ref": {
"version": "1.2.5",
"resolved": "http://npm.dui88.com:80/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
"integrity": "sha1-YRXtJCz7rtWRVJnAqYQsopEvOKU=",
"dev": true
"integrity": "sha1-YRXtJCz7rtWRVJnAqYQsopEvOKU="
},
"use-composed-ref": {
"version": "1.1.0",
......@@ -13737,7 +14265,6 @@
"version": "1.0.5",
"resolved": "http://npm.dui88.com:80/use-sidecar/-/use-sidecar-1.0.5.tgz",
"integrity": "sha1-//8qF8HfQuNIYktpm6blwiBSfys=",
"dev": true,
"requires": {
"detect-node-es": "^1.1.0",
"tslib": "^1.9.3"
......@@ -13746,8 +14273,7 @@
"tslib": {
"version": "1.14.1",
"resolved": "http://npm.dui88.com:80/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha1-zy04vcNKE0vK8QkcQfZhni9nLQA=",
"dev": true
"integrity": "sha1-zy04vcNKE0vK8QkcQfZhni9nLQA="
}
}
},
......@@ -14383,6 +14909,11 @@
}
}
},
"whatwg-fetch": {
"version": "3.6.2",
"resolved": "http://npm.dui88.com:80/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
"integrity": "sha1-3O0k838mJO0CgXJdUdDi4/5nf4w="
},
"which": {
"version": "2.0.2",
"resolved": "http://npm.dui88.com:80/which/-/which-2.0.2.tgz",
......
src/canvasCom/canvasTestCom/PolygonSystemCom.tsx 0 → 100644
View file @ bc2e268c
import React from 'react';
import "./canvasTestCom.less";
import {PolygonAxiosSystem} from "./polygonAxiosSystem";
interface TestProps {
/**设置主题色 */
label?: string;
/**设置标题 */
test?: string;
}
export const CanvasTestCom = (pros:TestProps)=>{
const polygonAxiosSystem = new PolygonAxiosSystem(
100, //坐标系统原点在弹窗中的x坐标
200, //坐标系统原点在弹窗中的y坐标
3, //3个坐标轴
3, //3个坐标节点
30, //坐标系统的单位长度,一个刻度多长。
90 //坐标系统顺时针旋转多少度，原坐标系统基准轴水平向右，也是drawShape传的第一个数值所在的坐标轴。
);
stage.addChild(polygonAxiosSystem);
polygonAxiosSystem.updateData(50 + "," + 50 + "," + 50);
return (
<div></div>
)
}
\ No newline at end of file
src/canvasCom/canvasTestCom/polygonAxiosSystem.ts 0 → 100644
View file @ bc2e268c
export class PolygonAxiosSystem extends FYGE.Container {
systemContainer: FYGE.Container;
orginX: number; //原点坐标X，默认0
orginY: number; //原点坐标Y，默认0
axiosLineNum: number; //坐标轴个数,默认3
axiosNodeNum: number; //坐标节点个数（包含原点），默认4个节点
step: number; //坐标轴的步长，默认40
rotationDeg: number; //整个坐标系统的旋转角度，单位度，如果不传基准轴水平右；默认0
labels: any; //坐标轴名称
style: any; //坐标系统样式
drawShapeObeject:any;//根据属性绘制的图形
/**默认样式
* style = {
gridStyle: {
color: 0x666666,
width: 1,
},
shapeStyle: {
color: 0x999999,
width: 5,
},
labelStyle: {
color: "#666666",
size: 24,
},
};
*/
/**
*
* @param x 原点坐标X
* @param y 原点坐标y
* @param axiosLineNum 坐标轴个数,默认3
* @param axiosNodeNum 坐标节点个数（包含原点），默认4个节点
* @param step 坐标轴的步长，默认40
* @param rotationDeg 整个坐标系统的旋转角度，单位度，如果不传基准轴水平右；默认0
* @param labels 坐标轴名称，默认无
* @param style 坐标系统样式
*/
constructor(
x = 0,
y = 0,
axiosLineNum = 3,
axiosNodeNum = 4,
step = 40,
rotationDeg = 0,
labels = [],
style = null
) {
super();
this.orginX = x;
this.orginY = y;
this.axiosLineNum = axiosLineNum;
this.axiosNodeNum = axiosNodeNum;
this.step = step;
this.rotationDeg = rotationDeg;
this.labels = labels;
let defaultStyle = {
gridStyle: {
color: 0xb46e42,
width: 1,
},
shapeStyle: {
color: 0x95d176,
alpha: 0.8,
},
labelStyle: {
color: "#7c3c23",
size: 24,
},
};
this.style = {
...defaultStyle,
...style,
};
this.initUi();
}
async initUi() {
this.position.set(this.orginX,this.orginY);
var coordsArr = this.computeAxiosCoords();
//绘制三角形
for (let i = 0; i < this.axiosNodeNum; i++) {
var shapeCoords = [];
coordsArr.forEach((el) => {
shapeCoords.push([el[i][0], el[i][1]]);
});
this.drawAxiosShape(shapeCoords);
}
//绘制轴线
for(let i =0 ;i<coordsArr.length-1;i++){
this.drawAxiosShape(coordsArr[i]);
}
}
/**
*
* @param points 一个坐标轴上所有节点坐标
* @param index 第几个坐标轴，从0开始
* @returns
*/
drawAxiosLabel(points, index) {
if (this.labels.length === 0) return;
let text = this.getText(
this.labels[index],
this.style.labelStyle.size,
this.style.labelStyle.color
);
let coordsArr = JSON.parse(JSON.stringify(points));
let len = coordsArr.length;
let dx = coordsArr[1][0] - coordsArr[0][0];
let dy = coordsArr[1][1] - coordsArr[0][1];
let x = coordsArr[len - 1][0];
let y = coordsArr[len - 1][1];
let coords = [x, y];
if (dx < 0) {
coords[0] = coords[0] - text.textWidth;
}
if (dy < 0) {
coords[1] = coords[1] - text.textHeight;
}
this.addChild(text).position.set(coords[0], coords[1]);
}
/**
*
* @param points
* @param isDrawGrid 是否是绘制坐标格网，不是就是根据实际值绘制图形。
* @param isLineShape 实际值如果相差很大，一个很大，另外都为0，就绘制线。
*/
drawAxiosShape(points, isDrawGrid = true) {
var data = [];
points.forEach(el => {
data.push([Number(el[0].toFixed(2)),Number(el[1]).toFixed(2)])
});
points = data;
let shape = null;
if (!isDrawGrid) {
var polygonData = [];
points.forEach(el => {
polygonData.push(Number(el[0]),Number(el[1]))
});
shape = new FYGE.Graphics();
shape.beginFill(this.style.shapeStyle.color,this.style.shapeStyle.alpha);
shape.drawPolygon(polygonData)
} else {
shape = new FYGE.Shape();
shape.beginStroke(
this.style.gridStyle.color,
this.style.gridStyle.width
);
shape.moveTo(points[0][0], points[0][1]);
points.forEach((el, index) => {
if (index !== 0) {
shape.lineTo(el[0], el[1]);
}
});
shape.endStroke();
}
this.addChild(shape);
return shape;
}
computeAxiosCoords() {
let baseCoordsArr = [];
//计算基准轴上的坐标，
for (let j = 0; j < this.axiosNodeNum; j++) {
let x = j * this.step;
let y = 0;
baseCoordsArr[j] = [x, y];
}
//计算基准轴上坐标集合经过旋转后的得到的坐标集合
//@ts-ignore
let coordsArr = new Array(this.axiosLineNum).fill([]);
const vectorArr = this.computeVectorArr();
for (let i = 0; i < vectorArr.length; i++) {
let rotationRatio = vectorArr[i]; //旋转系数;
let coords = [];
baseCoordsArr.forEach((el) => {
let x =
el[0] * rotationRatio[0][0] + el[1] * rotationRatio[0][1];
let y =
el[0] * rotationRatio[1][0] + el[1] * rotationRatio[1][1];
coords.push([x, y]);
});
coordsArr[i] = coords;
}
//所有坐标加上原点坐标
coordsArr.forEach((el) => {
el.forEach((item) => {
item[0] = item[0] ;
item[1] = item[1] ;
});
});
return coordsArr;
}
//计算每个坐标轴相对于基准轴的旋转矢量
computeVectorArr() {
//@ts-ignore
let vectorArr = new Array(this.axiosLineNum).fill([]);
let stepDeg = 360 / this.axiosLineNum;
for (let i = 0; i < this.axiosLineNum + 1; i++) {
let deg = ((i * stepDeg + this.rotationDeg) / 180) * Math.PI;
vectorArr[i] = [
[Number(Math.cos(deg).toFixed(5)), Number(-Math.sin(deg).toFixed(5))],
[Number(Math.sin(deg).toFixed(5)), Number(Math.cos(deg).toFixed(5))],
];
}
return vectorArr;
}
computeRotationVector() {
let deg = (180 / 180) * Math.PI;
let rotationVector = [
[Math.cos(deg), -Math.sin(deg)],
[Math.sin(deg), Math.cos(deg)],
];
return rotationVector;
}
updateData(str) {
var strArr = str.split(",");
if (strArr.length !== this.axiosLineNum) {
console.log("传参个数与坐标轴线条数不一致");
return;
}
this.drawShapeObeject && this.removeChild(this.drawShapeObeject)
strArr = this.getAddedData(strArr);
strArr = this.computeInputData(strArr);
var points = [];
strArr.forEach((el) => {
points.push([Number(el), 0]);
});
const vectorArr = this.computeVectorArr();
let coords = [];
for (let i = 0; i < vectorArr.length - 1; i++) {
let rotationRatio = vectorArr[i]; //旋转系数;
let el = points[i];
let x = el[0] * rotationRatio[0][0] + el[1] * rotationRatio[0][1];
let y = el[0] * rotationRatio[1][0] + el[1] * rotationRatio[1][1];
coords.push([x, y]);
}
coords.push(coords[0]);
this.drawShapeObeject = this.drawAxiosShape(coords,false);
}
//对坐标数据进行处理，防止数据超限
computeInputData(inputData) {
var result = [];
let len = this.step * (this.axiosNodeNum - 1) - 5; //坐标轴的长度
inputData.forEach((el) => {
var ratio = 1 - 100 / (Number(el) + 100);
result.push(len * ratio);
});
return result;
}
/**
* 判断否有小与15的数，有的话所有数都加20，防止数据太小绘不出来
* @param inputData 输入数据
*/
getAddedData(inputData) {
var isNeedAdd = false;
inputData.forEach((el) => {
if (Number(el) < 15) {
isNeedAdd = true;
}
});
let data = [];
if (!isNeedAdd) {
return inputData;
} else {
inputData.forEach((el) => {
data.push(Number(el) + 15);
});
}
return data;
}
getMaxData(inputData) {
let max = 0;
inputData.forEach((el) => {
if (Number(el) > max) {
max = Number(el);
}
});
return max;
}
getText(
txt: string,
size: number,
color: string = "#eee",
align: FYGE.TEXT_ALIGN = FYGE.TEXT_ALIGN.LEFT,
textWidth: number = 0,
x: number = 0,
y: number = 0
): FYGE.TextField {
var text = new FYGE.TextField();
text.fillColor = color;
text.size = size;
text.textWidth = textWidth;
text.textAlign = align;
text.x = x;
text.y = y;
text.text = txt;
text.bold = true;
return text;
}
}
\ No newline at end of file
src/canvasCom/goldCoinCom/goldCoinAni.ts 0 → 100644
View file @ bc2e268c
export class GoldCoinAni extends FYGE.Container {
start: any;
end: any;
imgUrl: string; //金币的图标。
isMinus: boolean; //true为向上凸，false为向下凹。
startCallback: any; //第一个金币动效结束后的回调函数
endCallback: any; //最后一个金币动效结束后的回调函数
callback:any;
lineCoords: any; //根据起始点计算出来的贝赛曲线坐标。
curvature: number; //0-1之间，0代表直线，1代表最弯
goldNum: number; //动效上面金币个数。
time: number;//动效完成时间。
coordNum:any;//坐标串个数
/**
*
* @param start 动效起点,[120,30]
* @param end 动效终点,[120,30]
* @param imgUrl 动效图片
* @param startCallback 第一个金币动效结束时的回调
* @param endCallback 最后一个金币动效完成时的回调
* @param isMinus true为向上凸，false为向下凹。
* @param curvature 0-1之间，0代表直线，1代表最弯
* @param goldNum 动效上面金币个数
* @param time 动效完成时间
* @param coordNum 路线上的坐标串个数
*/
constructor(
start,
end,
imgUrl,
callback?: (start,end) => void,
isMinus = false,
curvature = 0.8,
goldNum = 10,
time = 500,
coordNum = 50,
) {
super();
this.start = start;
this.end = end;
this.imgUrl = imgUrl;
this.curvature = curvature;
this.isMinus = isMinus;
this.goldNum = goldNum;
this.callback = callback;
this.coordNum = goldNum > coordNum? goldNum:coordNum;
this.time = Math.floor( time / this.coordNum );
this.initUi();
}
initUi() {}
/**
* 重设起点和终点
* @param start [120,30]
* @param end [120,30]
*/
triggerAni(start = null, end = null) {
if(start)this.start = start;
if(end) this.end = end;
this.lineCoords = this.getBeiSaiCoords(this.start, this.end);
this._produceGoldCoinAni(this.createNewGoldCoin,(goldCodeNum)=>{
this.callback && this.callback(goldCodeNum)
});
}
createNewGoldCoin = (goldNum) => {
this._produceGoldCoinAni(() => {},(goldCodeNum) => {this.callback && this.callback(goldCodeNum)},goldNum);
}
/**
*
* @param createNewGoldCoin 金币移动时的回调函数。
* @param callback 到达终点位置后的回调函数
* @param goldCodeNum 产生的金币编号。
*/
_produceGoldCoinAni(
createNewGoldCoin?: (goldNum: number) => void,
callback?: (goldCodeNum) => void,
goldCodeNum = 1
) {
let coin = FYGE.Sprite.fromUrl(this.imgUrl);
this.addChild(coin);
coin["goldCodeNum"] = goldCodeNum;
let index = 0;
let timer = null;
let x = Math.floor(this.lineCoords.length/this.goldNum);
var loop = () => {
timer && clearTimeout(timer);
if (index === this.lineCoords.length) {
callback && callback( coin["goldCodeNum"] );
this.removeChild(coin);
return;
}
coin.position.set(
this.lineCoords[index][0],
this.lineCoords[index][1]
);
if( goldCodeNum < this.goldNum && ((index+1)% x === 0) ){
goldCodeNum ++;
createNewGoldCoin && createNewGoldCoin(goldCodeNum);
}
index = index + 1;
timer = this.setTimeoutSelf(() => {
loop();
}, this.time);
};
loop();
}
setTimeoutSelf(cb, interval) { // 实现setTimeout功能
let now = Date.now
let stime = now()
let etime = stime
let loop = () => {
var timeoutTimer = requestAnimationFrame(loop)
etime = now()
if (etime - stime >= interval) {
cb()
cancelAnimationFrame(timeoutTimer)
}
}
loop()
}
/**
* 输入起点终点坐标，得到贝塞曲线坐标
* @param start
* @param end
*/
getBeiSaiCoords(start, end) {
let x1 = start[0];
let y1 = start[1];
let x2 = end[0];
let y2 = end[1];
let x3 = (x1 + x2) / 2 + (y1 - y2) * this.curvature;
let y3 = (y1 + y2) / 2 + (x2 - x1) * this.curvature;
if (this.isMinus) {
x3 = (x1 + x2) / 2 - (y1 - y2) * this.curvature;
y3 = (y1 + y2) / 2 - (x2 - x1) * this.curvature;
}
let coords = [];
let speed =Number(1/this.coordNum);
for (let t = 0; t <= 1; t += speed) {
var x = quadraticBezier(x1, x3, x2, t);
var y = quadraticBezier(y1, y3, y2, t);
coords.push([x, y]);
}
function quadraticBezier(p1, p3, p2, t) {
var k = 1 - t;
return k * k * p1 + 2 * (1 - t) * t * p3 + t * t * p2;
}
return coords;
}
}
\ No newline at end of file
src/canvasCom/goldCoinCom/goldCoinCom.tsx 0 → 100644
View file @ bc2e268c
import React from 'react';
import "./canvasTestCom.less";
import {GoldCoinAni} from "./goldCoinAni";
interface TestProps {
/**设置主题色 */
label?: string;
/**设置标题 */
test?: string;
}
const goldCoinReceiveAniCallback =(goldCode)=>{
console.log(goldCode);
}
export const GoldCoinCom = (pros:TestProps)=>{
const goldCoinAni = new GoldCoinAni([150, 200], [516, 200], "../../asserts/homeGoldIconImg.png", goldCoinReceiveAniCallback.bind(this), true, 0.2, 10, 400);
stage.addChild(goldCoinAni);
goldCoinAni.triggerAni();
return (
<div></div>
)
}
\ No newline at end of file
src/canvasStories/goldCoin.stories1.tsx 0 → 100644
View file @ bc2e268c
import React from 'react';
import { GoldCoinCom } from '../canvasCom/goldCoinCom/GoldCoinCom.tsx';
export default {
component: GoldCoinCom,
title: 'Canvas组件/GoldCoin',
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
args: {
//👇 Now all Button stories will be primary.
primary: true,
},
};
//👇 We create a “template” of how args map to rendering
const Template = (args) => <GoldCoinCom {...args} />;
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'GoldCoin',
};
src/canvasStories/polygonAxiosSystem.stories.tsx 0 → 100644
View file @ bc2e268c
import React from 'react';
import { PolygonSystemCom } from '../canvasCom/canvasTestCom/PolygonSystemCom.tsx';
export default {
component: CanvasTestCom,
title: 'Canvas组件/Button',
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
args: {
//👇 Now all Button stories will be primary.
primary: true,
},
};
//👇 We create a “template” of how args map to rendering
const Template = (args) => <CanvasTestCom {...args} />;
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
src/components/testSpan/testSpan.tsx → src/reactCom/testSpan/testSpan.tsx
View file @ bc2e268c
import React from 'react';
import "./testSpan.less";
export const TestSpan = (obj)=>{
interface TestProps {
/**设置主题色 */
label?: string;
/**设置标题 */
test?: string;
}
export const TestSpan = (pros:TestProps)=>{
return (
<span className="testButton">
<span className = "testButton-inner">
</span>
{obj.label}
{pros.label}
<span>
{pros.test}
</span>
</span>
)
}
\ No newline at end of file
src/stories/Button.stories.tsx → src/reactStories/Button.stories.tsx
View file @ bc2e268c
......@@ -2,9 +2,16 @@ import React from 'react';
import { Button } from '@storybook/react/demo';
export default {
component: Button,
title: 'Components/Button',
title: 'React组件/Button',
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
args: {
//👇 Now all Button stories will be primary.
primary: true,
},
};
//👇 We create a “template” of how args map to rendering
const Template = (args) => <Button {...args} />;
......
src/stories/danma..stories.tsx → src/reactStories/Danma.stories.tsx
View file @ bc2e268c
import React from 'react';
import { Danma } from "../components/danma/danma";
import DanmaItem from '../components/danma/danmaItem';
import { Danma } from "../reactCom/danma/danma";
import DanmaItem from '../reactCom/danma/danmaItem';
export default {
component: Danma,
title: 'Components/Danma',
title: 'React组件/Danma',
};
let danmaAvatars = ["//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
, "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
......@@ -83,3 +83,6 @@ Primary.args = {
primary: false,
label: 'Danma',
};
Primary.parameters = {
layout: 'centered',
};
\ No newline at end of file
src/stories/TestSpan.stories.tsx → src/reactStories/TestSpan.stories.tsx
View file @ bc2e268c
import React from 'react';
import { TestSpan } from "../components/testSpan/testSpan";
import { TestSpan } from "../reactCom/testSpan/testSpan";
export default {
component: TestSpan,
title: 'Components/TestSpan',
title: 'React组件/TestSpan',
argTypes: {
variant: {
options: ['TestSpan', 'Default'],
control: { label: 'radio' }
}
}
};
//👇 We create a “template” of how args map to rendering
......@@ -11,13 +17,17 @@ const Template = (args) => <TestSpan {...args} />;
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = {
primary: false,
primary: true,
label: 'TestSpan',
};
Primary.parameters = {
layout: 'centered',
};
export const Default = Template.bind({});
Default.args = {
primary: false,
label: 'TestSpan-Default',
primary: true,
label: 'Default',
};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment