From 90e3182d8901bc6cf5f86ac07d3949efd25d7e0f Mon Sep 17 00:00:00 2001 From: significative <163999932+significative@users.noreply.github.com> Date: Thu, 25 Jul 2024 10:54:36 +0800 Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E8=AF=BE=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/module/constRouter/index.ts | 9 + .../course/components/KnowledgeGraph.vue | 164 +++++ src/views/course/components/atlasUi.vue | 46 ++ .../course/components/lookResourceUi.vue | 190 ++++++ src/views/course/index.vue | 149 ++++ src/views/course/spritetext.js | 641 ++++++++++++++++++ src/views/home/index.vue | 4 +- 7 files changed, 1202 insertions(+), 1 deletion(-) create mode 100644 src/views/course/components/KnowledgeGraph.vue create mode 100644 src/views/course/components/atlasUi.vue create mode 100644 src/views/course/components/lookResourceUi.vue create mode 100644 src/views/course/index.vue create mode 100644 src/views/course/spritetext.js diff --git a/src/router/module/constRouter/index.ts b/src/router/module/constRouter/index.ts index a2c9ec8..c916f54 100644 --- a/src/router/module/constRouter/index.ts +++ b/src/router/module/constRouter/index.ts @@ -62,6 +62,15 @@ export const constRouter: any = [ hidden: false, }, }, + { + path:'/course', + component:() => import('@/views/course/index.vue'), + name:'course', + meta: { + title: '课程首页', + hidden: true, + }, + }, // { // path: '/talentDevelopment', // 人才培养 // component: () => import('@/views/talentDevelopment/index.vue'), diff --git a/src/views/course/components/KnowledgeGraph.vue b/src/views/course/components/KnowledgeGraph.vue new file mode 100644 index 0000000..f9ba943 --- /dev/null +++ b/src/views/course/components/KnowledgeGraph.vue @@ -0,0 +1,164 @@ + + + + + diff --git a/src/views/course/components/atlasUi.vue b/src/views/course/components/atlasUi.vue new file mode 100644 index 0000000..bc3c26c --- /dev/null +++ b/src/views/course/components/atlasUi.vue @@ -0,0 +1,46 @@ + + + diff --git a/src/views/course/components/lookResourceUi.vue b/src/views/course/components/lookResourceUi.vue new file mode 100644 index 0000000..775f033 --- /dev/null +++ b/src/views/course/components/lookResourceUi.vue @@ -0,0 +1,190 @@ + + + diff --git a/src/views/course/index.vue b/src/views/course/index.vue new file mode 100644 index 0000000..749fc32 --- /dev/null +++ b/src/views/course/index.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/src/views/course/spritetext.js b/src/views/course/spritetext.js new file mode 100644 index 0000000..fad89eb --- /dev/null +++ b/src/views/course/spritetext.js @@ -0,0 +1,641 @@ +import { + LinearFilter, + Sprite, + SpriteMaterial, + SRGBColorSpace, + Texture, +} from 'three' + +function _callSuper(t, o, e) { + return ( + (o = _getPrototypeOf(o)), + _possibleConstructorReturn( + t, + _isNativeReflectConstruct() + ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) + : o.apply(t, e), + ) + ) +} +function _isNativeReflectConstruct() { + try { + let t = !Boolean.prototype.valueOf.call( + Reflect.construct(Boolean, [], function () {}), + ) + } catch (t) {} + return (_isNativeReflectConstruct = function () { + return !!t + })() +} +function _iterableToArrayLimit(r, l) { + let t = + null == r + ? null + : ('undefined' != typeof Symbol && r[Symbol.iterator]) || r['@@iterator'] + if (null != t) { + let e, + n, + i, + u, + a = [], + f = !0, + o = !1 + try { + if (((i = (t = t.call(r)).next), 0 === l)) { + if (Object(t) !== t) return + f = !1 + } else + for ( + ; + !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); + f = !0 + ); + } catch (r) { + ;(o = !0), (n = r) + } finally { + try { + if (!f && null != t.return && ((u = t.return()), Object(u) !== u)) + return + } finally { + if (o) throw n + } + } + return a + } +} +function _toPrimitive(t, r) { + if ('object' != typeof t || !t) return t + let e = t[Symbol.toPrimitive] + if (void 0 !== e) { + let i = e.call(t, r || 'default') + if ('object' != typeof i) return i + throw new TypeError('@@toPrimitive must return a primitive value.') + } + return ('string' === r ? String : Number)(t) +} +function _toPropertyKey(t) { + let i = _toPrimitive(t, 'string') + return 'symbol' == typeof i ? i : String(i) +} +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError('Cannot call a class as a function') + } +} +function _defineProperties(target, props) { + for (let i = 0; i < props.length; i++) { + let descriptor = props[i] + descriptor.enumerable = descriptor.enumerable || false + descriptor.configurable = true + if ('value' in descriptor) descriptor.writable = true + Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor) + } +} +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps) + if (staticProps) _defineProperties(Constructor, staticProps) + Object.defineProperty(Constructor, 'prototype', { + writable: false, + }) + return Constructor +} +function _inherits(subClass, superClass) { + if (typeof superClass !== 'function' && superClass !== null) { + throw new TypeError('Super expression must either be null or a function') + } + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true, + }, + }) + Object.defineProperty(subClass, 'prototype', { + writable: false, + }) + if (superClass) _setPrototypeOf(subClass, superClass) +} +function _getPrototypeOf(o) { + _getPrototypeOf = Object.setPrototypeOf + ? Object.getPrototypeOf.bind() + : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o) + } + return _getPrototypeOf(o) +} +function _setPrototypeOf(o, p) { + _setPrototypeOf = Object.setPrototypeOf + ? Object.setPrototypeOf.bind() + : function _setPrototypeOf(o, p) { + o.__proto__ = p + return o + } + return _setPrototypeOf(o, p) +} +function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError( + "this hasn't been initialised - super() hasn't been called", + ) + } + return self +} +function _possibleConstructorReturn(self, call) { + if (call && (typeof call === 'object' || typeof call === 'function')) { + return call + } else if (call !== void 0) { + throw new TypeError( + 'Derived constructors may only return object or undefined', + ) + } + return _assertThisInitialized(self) +} +function _slicedToArray(arr, i) { + return ( + _arrayWithHoles(arr) || + _iterableToArrayLimit(arr, i) || + _unsupportedIterableToArray(arr, i) || + _nonIterableRest() + ) +} +function _toConsumableArray(arr) { + return ( + _arrayWithoutHoles(arr) || + _iterableToArray(arr) || + _unsupportedIterableToArray(arr) || + _nonIterableSpread() + ) +} +function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) return _arrayLikeToArray(arr) +} +function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr +} +function _iterableToArray(iter) { + if ( + (typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null) || + iter['@@iterator'] != null + ) + return Array.from(iter) +} +function _unsupportedIterableToArray(o, minLen) { + if (!o) return + if (typeof o === 'string') return _arrayLikeToArray(o, minLen) + let n = Object.prototype.toString.call(o).slice(8, -1) + if (n === 'Object' && o.constructor) n = o.constructor.name + if (n === 'Map' || n === 'Set') return Array.from(o) + if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) + return _arrayLikeToArray(o, minLen) +} +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length + for (let i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i] + return arr2 +} +function _nonIterableSpread() { + throw new TypeError( + 'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.', + ) +} +function _nonIterableRest() { + throw new TypeError( + 'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.', + ) +} + +let three = + typeof window !== 'undefined' && window.THREE + ? window.THREE // Prefer consumption from global THREE, if exists + : { + LinearFilter: LinearFilter, + Sprite: Sprite, + SpriteMaterial: SpriteMaterial, + SRGBColorSpace: SRGBColorSpace, + Texture: Texture, + } +let _default = /*#__PURE__*/ (function (_three$Sprite) { + _inherits(_default, _three$Sprite) + function _default() { + let _this + let text = + arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '' + let textHeight = + arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10 + let color = + arguments.length > 2 && arguments[2] !== undefined + ? arguments[2] + : 'rgba(255, 255, 255, 1)' + _classCallCheck(this, _default) + _this = _callSuper(this, _default, [new three.SpriteMaterial()]) + _this._text = ''.concat(text) + _this._textHeight = textHeight + _this._color = color + _this._backgroundColor = false // no background color + + _this._padding = 0 + _this._borderWidth = 0 + _this._borderRadius = 0 + _this._borderColor = 'white' + _this._strokeWidth = 0 + _this._strokeColor = 'white' + _this._fontFace = 'system-ui' + _this._fontSize = 90 // defines text resolution + _this._fontWeight = 'normal' + _this._canvas = document.createElement('canvas') + _this._genCanvas() + return _this + } + _createClass(_default, [ + { + key: 'text', + get: function get() { + return this._text + }, + set: function set(text) { + this._text = text + this._genCanvas() + }, + }, + { + key: 'textHeight', + get: function get() { + return this._textHeight + }, + set: function set(textHeight) { + this._textHeight = textHeight + this._genCanvas() + }, + }, + { + key: 'color', + get: function get() { + return this._color + }, + set: function set(color) { + this._color = color + this._genCanvas() + }, + }, + { + key: 'backgroundColor', + get: function get() { + return this._backgroundColor + }, + set: function set(color) { + this._backgroundColor = color + this._genCanvas() + }, + }, + { + key: 'padding', + get: function get() { + return this._padding + }, + set: function set(padding) { + this._padding = padding + this._genCanvas() + }, + }, + { + key: 'borderWidth', + get: function get() { + return this._borderWidth + }, + set: function set(borderWidth) { + this._borderWidth = borderWidth + this._genCanvas() + }, + }, + { + key: 'borderRadius', + get: function get() { + return this._borderRadius + }, + set: function set(borderRadius) { + this._borderRadius = borderRadius + this._genCanvas() + }, + }, + { + key: 'borderColor', + get: function get() { + return this._borderColor + }, + set: function set(borderColor) { + this._borderColor = borderColor + this._genCanvas() + }, + }, + { + key: 'fontFace', + get: function get() { + return this._fontFace + }, + set: function set(fontFace) { + this._fontFace = fontFace + this._genCanvas() + }, + }, + { + key: 'fontSize', + get: function get() { + return this._fontSize + }, + set: function set(fontSize) { + this._fontSize = fontSize + this._genCanvas() + }, + }, + { + key: 'fontWeight', + get: function get() { + return this._fontWeight + }, + set: function set(fontWeight) { + this._fontWeight = fontWeight + this._genCanvas() + }, + }, + { + key: 'strokeWidth', + get: function get() { + return this._strokeWidth + }, + set: function set(strokeWidth) { + this._strokeWidth = strokeWidth + this._genCanvas() + }, + }, + { + key: 'strokeColor', + get: function get() { + return this._strokeColor + }, + set: function set(strokeColor) { + this._strokeColor = strokeColor + this._genCanvas() + }, + }, + { + key: '_genCanvas', + value: function _genCanvas() { + let _this2 = this + let canvas = this._canvas + let ctx = canvas.getContext('2d') + let border = Array.isArray(this.borderWidth) + ? this.borderWidth + : [this.borderWidth, this.borderWidth] // x,y border + let relBorder = border.map(function (b) { + return b * _this2.fontSize * 0.1 + }) // border in canvas units + + let borderRadius = Array.isArray(this.borderRadius) + ? this.borderRadius + : [ + this.borderRadius, + this.borderRadius, + this.borderRadius, + this.borderRadius, + ] // tl tr br bl corners + let relBorderRadius = borderRadius.map(function (b) { + return b * _this2.fontSize * 0.1 + }) // border radius in canvas units + + let padding = Array.isArray(this.padding) + ? this.padding + : [this.padding, this.padding] // x,y padding + let relPadding = padding.map(function (p) { + return p * _this2.fontSize * 0.1 + }) // padding in canvas units + + let lines = this.text.split('\n') + let font = '' + .concat(this.fontWeight, ' ') + .concat(this.fontSize, 'px ') + .concat(this.fontFace) + ctx.font = font // measure canvas with appropriate font + let innerWidth = Math.max.apply( + Math, + _toConsumableArray( + lines.map(function (line) { + return ctx.measureText(line).width + }), + ), + ) + let innerHeight = this.fontSize * lines.length + canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2 + canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2 + + // paint border + if (this.borderWidth) { + ctx.strokeStyle = this.borderColor + if (relBorder[0]) { + // left + right borders + let hb = relBorder[0] / 2 + ctx.lineWidth = relBorder[0] + ctx.beginPath() + ctx.moveTo(hb, relBorderRadius[0]) + ctx.lineTo(hb, canvas.height - relBorderRadius[3]) + ctx.moveTo(canvas.width - hb, relBorderRadius[1]) + ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2]) + ctx.stroke() + } + if (relBorder[1]) { + // top + bottom borders + let _hb = relBorder[1] / 2 + ctx.lineWidth = relBorder[1] + ctx.beginPath() + ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), _hb) + ctx.lineTo( + canvas.width - Math.max(relBorder[0], relBorderRadius[1]), + _hb, + ) + ctx.moveTo( + Math.max(relBorder[0], relBorderRadius[3]), + canvas.height - _hb, + ) + ctx.lineTo( + canvas.width - Math.max(relBorder[0], relBorderRadius[2]), + canvas.height - _hb, + ) + ctx.stroke() + } + if (this.borderRadius) { + // strike rounded corners + let cornerWidth = Math.max.apply( + Math, + _toConsumableArray(relBorder), + ) + let _hb2 = cornerWidth / 2 + ctx.lineWidth = cornerWidth + ctx.beginPath() + ;[ + !!relBorderRadius[0] && [ + relBorderRadius[0], + _hb2, + _hb2, + relBorderRadius[0], + ], + !!relBorderRadius[1] && [ + canvas.width - relBorderRadius[1], + canvas.width - _hb2, + _hb2, + relBorderRadius[1], + ], + !!relBorderRadius[2] && [ + canvas.width - relBorderRadius[2], + canvas.width - _hb2, + canvas.height - _hb2, + canvas.height - relBorderRadius[2], + ], + !!relBorderRadius[3] && [ + relBorderRadius[3], + _hb2, + canvas.height - _hb2, + canvas.height - relBorderRadius[3], + ], + ] + .filter(function (d) { + return d + }) + .forEach(function (_ref) { + let _ref2 = _slicedToArray(_ref, 4), + x0 = _ref2[0], + x1 = _ref2[1], + y0 = _ref2[2], + y1 = _ref2[3] + ctx.moveTo(x0, y0) + ctx.quadraticCurveTo(x1, y0, x1, y1) + }) + ctx.stroke() + } + } + + // paint background + if (this.backgroundColor) { + ctx.fillStyle = this.backgroundColor + if (!this.borderRadius) { + ctx.fillRect( + relBorder[0], + relBorder[1], + canvas.width - relBorder[0] * 2, + canvas.height - relBorder[1] * 2, + ) + } else { + // fill with rounded corners + ctx.beginPath() + ctx.moveTo(relBorder[0], relBorderRadius[0]) + ;[ + [ + relBorder[0], + relBorderRadius[0], + canvas.width - relBorderRadius[1], + relBorder[1], + relBorder[1], + relBorder[1], + ], + // t + [ + canvas.width - relBorder[0], + canvas.width - relBorder[0], + canvas.width - relBorder[0], + relBorder[1], + relBorderRadius[1], + canvas.height - relBorderRadius[2], + ], + // r + [ + canvas.width - relBorder[0], + canvas.width - relBorderRadius[2], + relBorderRadius[3], + canvas.height - relBorder[1], + canvas.height - relBorder[1], + canvas.height - relBorder[1], + ], + // b + [ + relBorder[0], + relBorder[0], + relBorder[0], + canvas.height - relBorder[1], + canvas.height - relBorderRadius[3], + relBorderRadius[0], + ], // t + ].forEach(function (_ref3) { + let _ref4 = _slicedToArray(_ref3, 6), + x0 = _ref4[0], + x1 = _ref4[1], + x2 = _ref4[2], + y0 = _ref4[3], + y1 = _ref4[4], + y2 = _ref4[5] + ctx.quadraticCurveTo(x0, y0, x1, y1) + ctx.lineTo(x2, y2) + }) + ctx.closePath() + ctx.fill() + } + } + ctx.translate.apply(ctx, _toConsumableArray(relBorder)) + ctx.translate.apply(ctx, _toConsumableArray(relPadding)) + + // paint text + ctx.font = font // Set font again after canvas is resized, as context properties are reset + ctx.fillStyle = this.color + ctx.textBaseline = 'bottom' + let drawTextStroke = this.strokeWidth > 0 + if (drawTextStroke) { + ctx.lineWidth = (this.strokeWidth * this.fontSize) / 10 + ctx.strokeStyle = this.strokeColor + } + lines.forEach(function (line, index) { + let lineX = (innerWidth - ctx.measureText(line).width) / 2 + let lineY = (index + 1) * _this2.fontSize + drawTextStroke && ctx.strokeText(line, lineX, lineY) + ctx.fillText(line, lineX, lineY) + }) + + // Inject canvas into sprite + if (this.material.map) this.material.map.dispose() // gc previous texture + let texture = (this.material.map = new three.Texture(canvas)) + texture.minFilter = three.LinearFilter + texture.colorSpace = three.SRGBColorSpace + texture.needsUpdate = true + let yScale = + this.textHeight * lines.length + border[1] * 2 + padding[1] * 2 + this.scale.set((yScale * canvas.width) / canvas.height, yScale, 0) + }, + }, + { + key: 'clone', + value: function clone() { + return new this.constructor( + this.text, + this.textHeight, + this.color, + ).copy(this) + }, + }, + { + key: 'copy', + value: function copy(source) { + three.Sprite.prototype.copy.call(this, source) + this.color = source.color + this.backgroundColor = source.backgroundColor + this.padding = source.padding + this.borderWidth = source.borderWidth + this.borderColor = source.borderColor + this.fontFace = source.fontFace + this.fontSize = source.fontSize + this.fontWeight = source.fontWeight + this.strokeWidth = source.strokeWidth + this.strokeColor = source.strokeColor + return this + }, + }, + ]) + return _default +})(three.Sprite) + +export { _default as default } diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 5ba0a65..10be4dd 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -7,7 +7,7 @@
-
+
@@ -62,8 +62,10 @@