Commit e83c8953 authored by 范雪寒's avatar 范雪寒

fix: 线条替换素材;图片尺寸放大

parent 1e9318d5
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": false
}
}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import { import {
getAngleByPos, getAngleByPos,
...@@ -25,14 +25,14 @@ import { ...@@ -25,14 +25,14 @@ import {
getMinScale, getMinScale,
getPosDistance, jelly, showPopParticle, shake getPosDistance, jelly, showPopParticle, shake
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import { res, resAudio } from './resources';
import {Subject} from 'rxjs'; import { Subject } from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
import * as _ from 'lodash'; import * as _ from 'lodash';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {del} from 'selenium-webdriver/http'; import { del } from 'selenium-webdriver/http';
// import {text} from "@angular/core/src/render3"; // import {text} from "@angular/core/src/render3";
...@@ -225,7 +225,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -225,7 +225,7 @@ export class PlayComponent implements OnInit, OnDestroy {
ngOnInit() { ngOnInit() {
const getData = (<any> window).courseware.getData; const getData = (<any>window).courseware.getData;
getData((data) => { getData((data) => {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
...@@ -234,7 +234,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -234,7 +234,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {}; this.data = {};
} }
console.log('data:' , data); console.log('data:', data);
if (!this.data.contentObj) { if (!this.data.contentObj) {
this.data.contentObj = {}; this.data.contentObj = {};
} }
...@@ -267,7 +267,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -267,7 +267,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if (!picArr || picArr.length == 0) { if (!picArr || picArr.length == 0) {
const picArr = []; const picArr = [];
for (let i = 0; i < 4; i ++) { for (let i = 0; i < 4; i++) {
const data = { const data = {
a_text: (i + 1), a_text: (i + 1),
...@@ -434,8 +434,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -434,8 +434,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const addPicUrl = (url) => { const addPicUrl = (url) => {
if (url) { if (url) {
this.rawImages.set(url, url); this.rawImages.set(url, url);
} }
}; };
...@@ -443,8 +443,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -443,8 +443,8 @@ export class PlayComponent implements OnInit, OnDestroy {
if (arr) { if (arr) {
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
addPicUrl( arr[i].a_pic_url); addPicUrl(arr[i].a_pic_url);
addPicUrl( arr[i].b_pic_url); addPicUrl(arr[i].b_pic_url);
} }
} }
...@@ -490,7 +490,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -490,7 +490,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initCtx(); this.initCtx();
this.initView(); this.initView();
this.initListener(); this.initListener();
...@@ -519,43 +519,24 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -519,43 +519,24 @@ export class PlayComponent implements OnInit, OnDestroy {
initItem() { initItem() {
const picArr = this.picArr; const picArr = this.picArr;
let itemW, edgeW, disW, disH, offX, offY; const rate = 10; // 距离与图片比例 10:1
const itemWidth = (this.canvasWidth - 20 * this.mapScale) / (picArr.length + (picArr.length - 1) / rate);
if (picArr.length <= 6) { const itemHeight = (this.canvasHeight - 100 * this.mapScale) / 2;
itemW = 215 * this.mapScale;
edgeW = 10 * this.mapScale;
disW = (this.canvasWidth - itemW * 6 - edgeW * 2) / 5;
disH = 300 * this.mapScale;
offX = this.canvasWidth / 2 - (picArr.length - 1) * (itemW + disW) / 2;
offY = this.canvasHeight / 2 - disH / 2 + 70 * this.mapScale;
} else {
// itemW = 215 * this.mapScale;
const rate = 10; // 距离与图片比例 10:1
edgeW = 10 * this.mapScale;
itemW = (this.canvasWidth - edgeW / 2) / (picArr.length * rate + picArr.length + 1) * rate;
disW = itemW / rate;
disH = 300 * this.mapScale;
offX = this.canvasWidth / 2 - (picArr.length - 1) * (itemW + disW) / 2; const itemSideLength = Math.min(itemWidth, itemHeight);
offY = this.canvasHeight / 2 - disH / 2 + 70 * this.mapScale;
}
const tmpS = itemW / 215; const disW = itemSideLength / rate;
const rectW = 157 * tmpS; const disH = (this.canvasHeight - itemSideLength * 2 - 120 * this.mapScale) / 2;
const offX = this.canvasWidth / 2 - (picArr.length - 1) * (itemSideLength + disW) / 2;
const offY = this.canvasHeight / 2 + 60 * this.mapScale;
let dataArrA = []; let dataArrA = [];
let dataArrB = []; let dataArrB = [];
for (let i = 0; i < picArr.length; i ++) { for (let i = 0; i < picArr.length; i++) {
const picData = picArr[i]; const picData = picArr[i];
let tmpData = {}; let tmpData = {};
...@@ -585,16 +566,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -585,16 +566,16 @@ export class PlayComponent implements OnInit, OnDestroy {
this.itemArrA = []; this.itemArrA = [];
this.itemArrB = []; this.itemArrB = [];
for (let i = 0; i < picArr.length; i ++) { for (let i = 0; i < picArr.length; i++) {
const dataA = dataArrA[i]; const dataA = dataArrA[i];
let itemBg = new MySprite(); let itemBg = new MySprite();
itemBg.init(this.images.get('item_bg')); itemBg.init(this.images.get('item_bg'));
itemBg.setScaleXY(itemW / itemBg.width); itemBg.setScaleXY(itemSideLength / itemBg.width);
itemBg.x = offX + i * (itemW + disW); itemBg.x = offX + i * (itemSideLength + disW);
itemBg.y = offY; itemBg.y = offY - (disH + itemSideLength / 2);
let bgRect = new ShapeRect(); let bgRect = new ShapeRect();
// bgRect.setSize(rectW, rectW); // bgRect.setSize(rectW, rectW);
...@@ -622,6 +603,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -622,6 +603,7 @@ export class PlayComponent implements OnInit, OnDestroy {
bgRect.addChild(label); bgRect.addChild(label);
} }
let dot = new MySprite(); let dot = new MySprite();
dot.init(this.images.get('dot')); dot.init(this.images.get('dot'));
dot.y = itemBg.height / 2 - 25; dot.y = itemBg.height / 2 - 25;
...@@ -640,9 +622,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -640,9 +622,9 @@ export class PlayComponent implements OnInit, OnDestroy {
const dataB = dataArrB[i]; const dataB = dataArrB[i];
itemBg = new MySprite(); itemBg = new MySprite();
itemBg.init(this.images.get('item_bg')); itemBg.init(this.images.get('item_bg'));
itemBg.setScaleXY(itemW / itemBg.width); itemBg.setScaleXY(itemSideLength / itemBg.width);
itemBg.x = offX + i * (itemW + disW); itemBg.x = offX + i * (itemSideLength * ((rate + 1) / rate));
itemBg.y = offY + disH; itemBg.y = offY + (disH + itemSideLength / 2);
bgRect = new ShapeRect(); bgRect = new ShapeRect();
...@@ -941,7 +923,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -941,7 +923,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.answerTitleArr = []; this.answerTitleArr = [];
const picBgW = 236; const picBgW = 236;
const disW = (w - picBgW * 4) / 3; const disW = (w - picBgW * 4) / 3;
for (let i = 0; i < 4; i ++) { for (let i = 0; i < 4; i++) {
const key = 'pic_bg_' + keyArr[i]; const key = 'pic_bg_' + keyArr[i];
const picBg = new MySprite(this.ctx); const picBg = new MySprite(this.ctx);
picBg.init(this.images.get(key)); picBg.init(this.images.get(key));
...@@ -1053,8 +1035,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1053,8 +1035,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const saveRect = data.rect; const saveRect = data.rect;
const item = new ShapeRect(this.ctx); const item = new ShapeRect(this.ctx);
item.setSize(saveRect.width, saveRect.height); item.setSize(saveRect.width, saveRect.height);
item.x = saveRect.x ; item.x = saveRect.x;
item.y = saveRect.y ; item.y = saveRect.y;
item['data'] = data; item['data'] = data;
this.renderArr.push(item); this.renderArr.push(item);
...@@ -1119,7 +1101,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1119,7 +1101,7 @@ export class PlayComponent implements OnInit, OnDestroy {
card.data = curData; card.data = curData;
this.picIndex ++; this.picIndex++;
if (this.picIndex >= this.picArr.length) { if (this.picIndex >= this.picArr.length) {
this.picIndex = 0; this.picIndex = 0;
} }
...@@ -1192,8 +1174,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1192,8 +1174,10 @@ export class PlayComponent implements OnInit, OnDestroy {
const title = new MySprite(); const title = new MySprite();
title.init(this.images.get('title')); title.init(this.images.get('title'));
title.setScaleXY(this.mapScale); title.setScaleXY(this.mapScale);
title.x = this.canvasWidth / 2; // title.x = this.canvasWidth / 2;
title.y = this.canvasHeight / 2 - 270 * this.mapScale; // title.y = this.canvasHeight / 2 - 270 * this.mapScale;
title.x = this.mapScale * (30 + title.width / 2);
title.y = this.mapScale * (30 + title.height / 2);
this.bgArr.push(title); this.bgArr.push(title);
} }
...@@ -1221,7 +1205,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1221,7 +1205,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.arm2.page2.visible = false; this.arm2.page2.visible = false;
this.picIndex ++ ; this.picIndex++;
if (this.picIndex >= this.picArr.length) { if (this.picIndex >= this.picArr.length) {
this.picIndex = 0; this.picIndex = 0;
...@@ -1718,7 +1702,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1718,7 +1702,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.addPetal(); this.addPetal();
}, 0 + this.petalTime); }, 0 + this.petalTime);
this.petalTime += 5; this.petalTime += 5;
} }
...@@ -1726,7 +1710,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1726,7 +1710,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const petal = new MySprite(this.ctx); const petal = new MySprite(this.ctx);
const id = Math.ceil( Math.random() * 3 ); const id = Math.ceil(Math.random() * 3);
petal.init(this.images.get('petal_' + id)); petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale; const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
...@@ -1865,14 +1849,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1865,14 +1849,14 @@ export class PlayComponent implements OnInit, OnDestroy {
const rateArea = 0.9; const rateArea = 0.9;
const num = this.picArr.length; const num = this.picArr.length;
const id = this.getNextItemIndex(); const id = this.getNextItemIndex();
const angle = 360 / num ; // this.picArr.length; const angle = 360 / num; // this.picArr.length;
const targetAngle = 360 * 4 + id * angle - 90 - (angle * (1 - rateArea) / 2 + angle * rateArea * Math.random()); const targetAngle = 360 * 4 + id * angle - 90 - (angle * (1 - rateArea) / 2 + angle * rateArea * Math.random());
console.log('id: ', id); console.log('id: ', id);
this.picIndex = id; this.picIndex = id;
this.lightDelayTime = 0; this.lightDelayTime = 0;
rotateItem(this.wheel, 360 * 11, 2.2 , () => { rotateItem(this.wheel, 360 * 11, 2.2, () => {
this.wheel.rotation = this.wheel.rotation % 360; this.wheel.rotation = this.wheel.rotation % 360;
rotateItem(this.wheel, targetAngle, 1.6, () => { rotateItem(this.wheel, targetAngle, 1.6, () => {
...@@ -1881,7 +1865,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1881,7 +1865,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.showAllLight(); this.showAllLight();
this.playAudio('tip'); this.playAudio('tip');
moveItem(this.arrow, this.arrow.x, this.arrow.y - 20 * this.mapScale, 0.5, ( ) => { moveItem(this.arrow, this.arrow.x, this.arrow.y - 20 * this.mapScale, 0.5, () => {
setTimeout(() => { setTimeout(() => {
this.showQuestionWindow(); this.showQuestionWindow();
...@@ -1893,7 +1877,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1893,7 +1877,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}); });
moveItem(this.arrow, this.arrow.x, this.arrow.baseY, 0.3, ( ) => { moveItem(this.arrow, this.arrow.x, this.arrow.baseY, 0.3, () => {
}, TWEEN.Easing.Cubic.Out); }, TWEEN.Easing.Cubic.Out);
...@@ -2084,7 +2068,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2084,7 +2068,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
item.setScaleXY(this.mapScale); // item.setScaleXY(this.mapScale);
jelly(item, 0.6); jelly(item, 0.6);
...@@ -2127,7 +2111,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2127,7 +2111,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const dot = item.dot; const dot = item.dot;
dot.visible = true; dot.visible = true;
dot.setScaleXY(0); dot.setScaleXY(0);
item.sTween = scaleItem(dot, this.mapScale, 0.3, () => { item.sTween = scaleItem(dot, this.mapScale * 0.5, 0.3, () => {
item.sTween = null; item.sTween = null;
}, TWEEN.Easing.Cubic.Out); }, TWEEN.Easing.Cubic.Out);
} }
...@@ -2165,8 +2149,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2165,8 +2149,8 @@ export class PlayComponent implements OnInit, OnDestroy {
]; ];
const color = colorArr[id]; const color = colorArr[id];
const oldPos = {x: oldItem.x, y: oldItem.y + oldItem.dot.y * oldItem.scaleY}; const oldPos = { x: oldItem.x, y: oldItem.y + oldItem.dot.y * oldItem.scaleY };
const newPos = {x: newItem.x, y: newItem.y + newItem.dot.y * newItem.scaleY}; const newPos = { x: newItem.x, y: newItem.y + newItem.dot.y * newItem.scaleY };
const line = new MySprite(); const line = new MySprite();
line.init(this.images.get(key)); line.init(this.images.get(key));
...@@ -2196,9 +2180,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2196,9 +2180,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// dot.fillColor = color; // dot.fillColor = color;
// this.bgArr.push(dot); // this.bgArr.push(dot);
tweenChange(line, {scaleY: targetS}, 1, () => { tweenChange(line, { scaleY: targetS }, 1, () => {
this.linkEnd(oldItem, newItem); this.linkEnd(oldItem, newItem);
}, TWEEN.Easing.Sinusoidal.Out , (i, pro) => { }, TWEEN.Easing.Sinusoidal.Out, (i, pro) => {
// const len = line.height * line.scaleY; // const len = line.height * line.scaleY;
// const p = getPosByAngle(angle, len); // const p = getPosByAngle(angle, len);
...@@ -2307,9 +2291,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2307,9 +2291,9 @@ export class PlayComponent implements OnInit, OnDestroy {
const tx = offX - (arm1.width) * arm1.scaleX + this.pageOffX * arm1.scaleX; const tx = offX - (arm1.width) * arm1.scaleX + this.pageOffX * arm1.scaleX;
moveItem(this.arm1, tx, arm1.y, 0.8, () => { moveItem(this.arm1, tx, arm1.y, 0.8, () => {
this.canTouch = true; this.canTouch = true;
this.clickLeft(); this.clickLeft();
} ); });
} }
moveArm2() { moveArm2() {
...@@ -2322,9 +2306,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2322,9 +2306,9 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canTouch = false; this.canTouch = false;
moveItem(arm2, this.canvasWidth - tx, arm2.y, 0.8, () => { moveItem(arm2, this.canvasWidth - tx, arm2.y, 0.8, () => {
this.canTouch = true; this.canTouch = true;
this.clickRight(); this.clickRight();
} ); });
} }
...@@ -2348,7 +2332,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2348,7 +2332,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const down = () => { const down = () => {
const targetY = this.stick.y + this.stick.height; const targetY = this.stick.y + this.stick.height;
tweenChange(this.ball, {y: targetY}, 0.8, () => { tweenChange(this.ball, { y: targetY }, 0.8, () => {
up(); up();
}, TWEEN.Easing.Quadratic.In, () => { }, TWEEN.Easing.Quadratic.In, () => {
this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height; this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height;
...@@ -2362,7 +2346,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2362,7 +2346,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const up = () => { const up = () => {
const targetY = this.stick.y - this.stick.height; const targetY = this.stick.y - this.stick.height;
tweenChange(this.ball, {y: targetY}, 0.8, () => { tweenChange(this.ball, { y: targetY }, 0.8, () => {
this.canTouch = true; this.canTouch = true;
}, TWEEN.Easing.Quadratic.Out, () => { }, TWEEN.Easing.Quadratic.Out, () => {
this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height; this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height;
...@@ -2401,7 +2385,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2401,7 +2385,7 @@ export class PlayComponent implements OnInit, OnDestroy {
showItem(curPic); showItem(curPic);
hideItem(this.mask); hideItem(this.mask);
this.picIndex ++; this.picIndex++;
if (this.picIndex >= this.picArr.length) { if (this.picIndex >= this.picArr.length) {
this.picIndex = 0; this.picIndex = 0;
} }
...@@ -2499,19 +2483,19 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2499,19 +2483,19 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canTouch = false; this.canTouch = false;
const data = {y: this.arm1.y}; const data = { y: this.arm1.y };
const tween = tweenChange(data, {y: this.arm1.y + this.canvasHeight}, 1, const tween = tweenChange(data, { y: this.arm1.y + this.canvasHeight }, 1,
() => { () => {
this.canTouch = true; this.canTouch = true;
this.resetArm(); this.resetArm();
}, },
TWEEN.Easing.Quadratic.In, TWEEN.Easing.Quadratic.In,
(item, progress) => { (item, progress) => {
this.arm1.y = item.y; this.arm1.y = item.y;
this.arm2.y = item.y; this.arm2.y = item.y;
}); });
} }
...@@ -2572,82 +2556,82 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2572,82 +2556,82 @@ export class PlayComponent implements OnInit, OnDestroy {
if (this.IsPC()) { if (this.IsPC()) {
this.canvas.nativeElement.addEventListener('mousedown', (event) => { this.canvas.nativeElement.addEventListener('mousedown', (event) => {
setMxMyByMouse(event); setMxMyByMouse(event);
this.mapDown(event); this.mapDown(event);
}); });
this.canvas.nativeElement.addEventListener('mousemove', (event) => { this.canvas.nativeElement.addEventListener('mousemove', (event) => {
setMxMyByMouse(event); setMxMyByMouse(event);
this.mapMove(event); this.mapMove(event);
}); });
this.canvas.nativeElement.addEventListener('mouseup', (event) => { this.canvas.nativeElement.addEventListener('mouseup', (event) => {
setMxMyByMouse(event); setMxMyByMouse(event);
this.mapUp(event); this.mapUp(event);
}); });
const setMxMyByMouse = (event) => { const setMxMyByMouse = (event) => {
this.mx = event.offsetX; this.mx = event.offsetX;
this.my = event.offsetY; this.my = event.offsetY;
}; };
} else { } else {
this.canvas.nativeElement.addEventListener('touchstart', (event) => { this.canvas.nativeElement.addEventListener('touchstart', (event) => {
setMxMyByTouch(event); setMxMyByTouch(event);
this.mapDown(event); this.mapDown(event);
}); });
this.canvas.nativeElement.addEventListener('touchmove', (event) => { this.canvas.nativeElement.addEventListener('touchmove', (event) => {
setMxMyByTouch(event); setMxMyByTouch(event);
this.mapMove(event); this.mapMove(event);
}); });
this.canvas.nativeElement.addEventListener('touchend', (event) => { this.canvas.nativeElement.addEventListener('touchend', (event) => {
setMxMyByTouch(event); setMxMyByTouch(event);
this.mapUp(event); this.mapUp(event);
}); });
this.canvas.nativeElement.addEventListener('touchcancel', (event) => { this.canvas.nativeElement.addEventListener('touchcancel', (event) => {
setMxMyByTouch(event); setMxMyByTouch(event);
this.mapUp(event); this.mapUp(event);
}); });
const setMxMyByTouch = (event) => { const setMxMyByTouch = (event) => {
// console.log('in setMxMyByTouch', event); // console.log('in setMxMyByTouch', event);
if (event.touches.length <= 0) { if (event.touches.length <= 0) {
return; return;
} }
if (this.canvasLeft == null) { if (this.canvasLeft == null) {
setParentOffset(); setParentOffset();
} }
this.mx = event.touches[0].pageX - this.canvasLeft; this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop; this.my = event.touches[0].pageY - this.canvasTop;
}; };
const setParentOffset = () => { const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect(); const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left; this.canvasLeft = rect.left;
this.canvasTop = rect.top; this.canvasTop = rect.top;
}; };
} }
...@@ -2810,7 +2794,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2810,7 +2794,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const x = Math.sin(radian) * len; const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len; const y = Math.cos(radian) * len;
return {x, y}; return { x, y };
} }
...@@ -2818,7 +2802,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2818,7 +2802,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const _x = ex - sx; const _x = ex - sx;
const _y = ey - sy; const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) ); const len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
return len; return len;
} }
......
...@@ -13,9 +13,6 @@ const res = [ ...@@ -13,9 +13,6 @@ const res = [
['line_4', "assets/play/line/4.png"], ['line_4', "assets/play/line/4.png"],
['line_5', "assets/play/line/5.png"], ['line_5', "assets/play/line/5.png"],
['line_6', "assets/play/line/6.png"], ['line_6', "assets/play/line/6.png"],
['line_7', "assets/play/line/7.png"],
['line_8', "assets/play/line/8.png"],
['line_9', "assets/play/line/9.png"],
['petal_1', "assets/play/petal_1.png"], ['petal_1', "assets/play/petal_1.png"],
['petal_2', "assets/play/petal_2.png"], ['petal_2', "assets/play/petal_2.png"],
......
src/assets/play/line/0.png

2.8 KB | W: | H:

src/assets/play/line/0.png

1.51 KB | W: | H:

src/assets/play/line/0.png
src/assets/play/line/0.png
src/assets/play/line/0.png
src/assets/play/line/0.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/line/1.png

2.79 KB | W: | H:

src/assets/play/line/1.png

1.53 KB | W: | H:

src/assets/play/line/1.png
src/assets/play/line/1.png
src/assets/play/line/1.png
src/assets/play/line/1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/line/2.png

2.79 KB | W: | H:

src/assets/play/line/2.png

1.51 KB | W: | H:

src/assets/play/line/2.png
src/assets/play/line/2.png
src/assets/play/line/2.png
src/assets/play/line/2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/line/3.png

2.79 KB | W: | H:

src/assets/play/line/3.png

1.52 KB | W: | H:

src/assets/play/line/3.png
src/assets/play/line/3.png
src/assets/play/line/3.png
src/assets/play/line/3.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/line/4.png

2.8 KB | W: | H:

src/assets/play/line/4.png

1.51 KB | W: | H:

src/assets/play/line/4.png
src/assets/play/line/4.png
src/assets/play/line/4.png
src/assets/play/line/4.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/line/5.png

2.8 KB | W: | H:

src/assets/play/line/5.png

1.51 KB | W: | H:

src/assets/play/line/5.png
src/assets/play/line/5.png
src/assets/play/line/5.png
src/assets/play/line/5.png
  • 2-up
  • Swipe
  • Onion skin
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