Commit cd08e47d authored by developers's avatar developers

上传代码

parent a970169f
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<div class="show-pic-box">
<div *ngFor="let it of item; let i = index" >
<div class="show-pic">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
[picUrl]="it['pic_url']"
(imageUploaded)="onImageUploadSuccess($event,i, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<app-audio-recorder style="float: left;"
[audioUrl]="it['audio_url']"
(audioUploaded)="onAudioUploadSuccess($event, i, 'audio_url')">
</app-audio-recorder>
<button class="show-pic-del" nz-button nzType="danger" (click)="deleteItem(i)">
<span>删除</span>
</button>
</div>
</div>
<div class="add-btn-box" >
<button nz-button nzType="dashed"
(click)="addPic()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
Add
</button>
</div>
</div>
<!-- div style="position: absolute; left: 1000px; top: 100px; width: 300px;">
<input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url_2"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url_2"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')"
></app-audio-recorder>
</div -->
</div>
......@@ -92,105 +75,105 @@
<!--<app-audio-recorder-->
<!--[audioUrl]="item.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccess($event)"-->
<!--[audioUrl]="item.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccess($event)"-->
<!--&gt;</app-audio-recorder>-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
<!--<div class="item-box">-->
<!--<div class="item-box">-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<div style="display: flex; justify-items: center; padding-top: 10px">-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it)">-->
<!--</app-audio-recorder>-->
<!--<div style="display: flex; justify-items: center; padding-top: 10px">-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it)">-->
<!--</app-audio-recorder>-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
<!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
<!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
<!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
<!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;question:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;question:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;answer:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;answer:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
<!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
<!--</div>-->
<!--</div>-->
<!--<div nz-col nzSpan="8" class="add-btn-box" >-->
<!--<div nz-col nzSpan="8" class="add-btn-box" >-->
<!--&lt;!&ndash;<div style="width: 100%; height: 100%;">&ndash;&gt;-->
<!--<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"-->
<!--(click)="addPic()">-->
<!--<i nz-icon nzType="plus-circle" nzTheme="outline"></i>-->
<!--Add-->
<!--</button>-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="width: 100%; height: 100%;">&ndash;&gt;-->
<!--<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"-->
<!--(click)="addPic()">-->
<!--<i nz-icon nzType="plus-circle" nzTheme="outline"></i>-->
<!--Add-->
<!--</button>-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</div>-->
<!--</div>-->
......@@ -201,133 +184,133 @@
<!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;-->
<!--&lt;!&ndash;<h5> title-sound: </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="item.contentObj.title_audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;<h5> title-sound: </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="item.contentObj.title_audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;-->
<!--&lt;!&ndash;<h5> bg-sound: </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="item.contentObj.bg_audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;<h5> bg-sound: </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="item.contentObj.bg_audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<span style="margin-bottom: 20px"> 10 : 23 </span>&ndash;&gt;-->
<!--&lt;!&ndash;<span style="margin-bottom: 20px"> 10 : 23 </span>&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index">&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index">&ndash;&gt;-->
<!--&lt;!&ndash;<span> pic-{{i + 1}}: </span>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; padding-bottom: 20px">&ndash;&gt;-->
<!--&lt;!&ndash;<span> pic-{{i + 1}}: </span>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; padding-bottom: 20px">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="width: 40%; padding-right: 20px">&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="width: 40%; padding-right: 20px">&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="pic-sound-box">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="pic-sound-box">&ndash;&gt;-->
<!--&lt;!&ndash;<div nz-row style="width: 50%; padding-bottom: 20px;">&ndash;&gt;-->
<!--&lt;!&ndash;<div nz-row style="width: 50%; padding-bottom: 20px;">&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it2.audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it2.audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index"&ndash;&gt;-->
<!--&lt;!&ndash;nz-col nzSpan="8" >&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index"&ndash;&gt;-->
<!--&lt;!&ndash;nz-col nzSpan="8" >&ndash;&gt;-->
<!--&lt;!&ndash;<div class="item-box">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="item-box">&ndash;&gt;-->
<!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
<!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
<!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
<!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
<!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;question:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;question:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;answer:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;answer:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
<!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
......
@import '../style/common_mixin';
.model-content {
width: 100%;
height: 100%;
}
.show-pic-box {display: flex;flex-wrap: wrap; justify-items: flex-start;align-content:start; margin-left: 5%; margin-top: 5vh; width: 90%;}
.show-pic {margin-left: 20px;margin-top: 30px; width: 300px}
.show-pic-del {float:right;width: 80px;height: 34px;}
.add-btn-box { margin-left: 20px;margin-top: 30px; width: 300px}
.add-btn-box button {margin: auto; width: 100%; height: 170px;}
......@@ -5,15 +5,15 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "csm_test";
// 储存对象
item;
item = [];
temp_pic = "";
constructor(private appRef: ApplicationRef) {
......@@ -22,7 +22,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() {
this.item = {};
this.item = [];
// 获取存储的数据
(<any> window).courseware.getData((data) => {
......@@ -30,7 +30,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if (data) {
this.item = data;
}
console.log(data);
this.init();
this.refresh();
......@@ -56,19 +56,20 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
onImageUploadSuccess(e, index, key) {
console.log(index + " -" + key + "-" + e.url);
this.item[index][key] = e.url;
this.save();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
onAudioUploadSuccess(e,index, key) {
this.item[key] = e.url;
this.item[index][key] = e.url;
this.save();
}
......@@ -90,6 +91,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.appRef.tick();
}, 1);
}
deleteItem(index) {
this.item.splice(index, 1);
this.save();
}
addPic() {
this.item.push( {"pic_url": ""} );
this.save();
}
}
import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window {
air: any;
curCtx: any;
}
declare let window: AirWindow;
class Sprite {
x = 0;
......@@ -19,7 +15,7 @@ class Sprite {
constructor(ctx = null) {
if (!ctx) {
this.ctx = window.curCtx;
this.ctx = window['curCtx'];
} else {
this.ctx = ctx;
}
......@@ -70,7 +66,7 @@ export class MySprite extends Sprite {
_z = 0;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
if (imgObj) {
......@@ -162,7 +158,6 @@ export class MySprite extends Sprite {
if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur;
......@@ -180,21 +175,22 @@ export class MySprite extends Sprite {
}
}
updateChildren() {
if (this.children.length <= 0) { return; }
for (const child of this.children) {
if (child === this) {
for (let i = 0; i < this.children.length; i++) {
if (this.children[i] === this) {
if (this.visible) {
this.drawSelf();
}
} else {
child.update();
this.children[i].update();
}
}
}
......@@ -241,7 +237,7 @@ export class MySprite extends Sprite {
removeChildren() {
for (let i = 0; i < this.children.length; i++) {
if (this.children[i]) {
if (this.children[i] !== this) {
if (this.children[i] != this) {
this.children.splice(i, 1);
i --;
}
......@@ -250,9 +246,9 @@ export class MySprite extends Sprite {
}
_changeChildAlpha(alpha) {
for (const child of this.children) {
if (child !== this) {
child.alpha = alpha;
for (let i = 0; i < this.children.length; i++) {
if (this.children[i] != this) {
this.children[i].alpha = alpha;
}
}
}
......@@ -378,8 +374,8 @@ export class ColorSpr extends MySprite {
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) {
for( let i = 0; i < c.height; i++){
for( let j = 0; j < c.width; j++){
const x = (i * 4) * c.width + ( j * 4 );
const r = c.data[x];
......@@ -413,7 +409,7 @@ export class GrayscaleSpr extends MySprite {
grayScale = 120;
createGSCanvas() {
createGSCanvas(){
if (!this.img) {
return;
......@@ -424,8 +420,8 @@ export class GrayscaleSpr extends MySprite {
const rect = this.getBoundingBox();
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) {
for( let i = 0; i < c.height; i++){
for( let j = 0; j < c.width; j++){
const x = (i * 4) * c.width + ( j * 4 );
const r = c.data[x];
......@@ -468,10 +464,10 @@ export class BitMapLabel extends MySprite {
const tmpArr = text.split('');
let totalW = 0;
let h = 0;
for (const tmp of tmpArr) {
for (let i = 0; i < tmpArr.length; i++) {
const label = new MySprite(this.ctx);
label.init(data[tmp], 0);
label.init(data[tmpArr[i]], 0);
this.addChild(label);
labelArr.push(label);
......@@ -484,9 +480,9 @@ export class BitMapLabel extends MySprite {
this.height = h;
let offX = -totalW / 2;
for (const label of labelArr) {
label.x = offX;
offX += label.width;
for (let i = 0; i < labelArr.length; i++) {
labelArr[i].x = offX;
offX += labelArr[i].width;
}
this.labelArr = labelArr;
......@@ -499,22 +495,22 @@ export class BitMapLabel extends MySprite {
export class Label extends MySprite {
text: string;
text: String;
// fontSize:String = '40px';
fontName = 'Verdana';
textAlign = 'left';
fontName: String = 'Verdana';
textAlign: String = 'left';
fontSize = 40;
fontColor = '#000000';
fontWeight = 900;
_maxWidth;
maxWidth;
outline = 0;
outlineColor = '#ffffff';
// _shadowFlag = false;
// _shadowColor;
// _shadowOffsetX;
// _shadowOffsetY;
// _shadowBlur;
_shadowFlag = false;
_shadowColor;
_shadowOffsetX;
_shadowOffsetY;
_shadowBlur;
_outlineFlag = false;
_outLineWidth;
......@@ -545,7 +541,7 @@ export class Label extends MySprite {
setMaxSize(w) {
this._maxWidth = w;
this.maxWidth = w;
this.refreshSize();
if (this.width >= w) {
this.scaleX *= w / this.width;
......@@ -564,7 +560,7 @@ export class Label extends MySprite {
const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
.onComplete(function() {
if (callBack) {
callBack();
}
......@@ -572,16 +568,16 @@ export class Label extends MySprite {
.start(); // Start the tween immediately.
}
// setShadow(offX = 0, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') {
//
// this._shadowFlag = true;
// this._shadowColor = color;
// // 将阴影向右移动15px,向上移动10px
// this._shadowOffsetX = 5;
// this._shadowOffsetY = 5;
// // 轻微模糊阴影
// this._shadowBlur = 5;
// }
setShadow(offX = 2, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') {
this._shadowFlag = true;
this._shadowColor = color;
// 将阴影向右移动15px,向上移动10px
this._shadowOffsetX = 5;
this._shadowOffsetY = 5;
// 轻微模糊阴影
this._shadowBlur = 5;
}
setOutline(width = 5, color = '#ffffff') {
......@@ -650,10 +646,11 @@ export class RichTextOld extends Label {
textArr = [];
fontSize = 40;
setText(text: string, words) {
setText(text:string, words) {
let newText = text;
for (const word of words) {
for (let i = 0; i < words.length; i++) {
const word = words[i];
const re = new RegExp(word, 'g');
newText = newText.replace( re, `#${word}#`);
......@@ -676,8 +673,8 @@ export class RichTextOld extends Label {
this.ctx.fontWeight = this.fontWeight;
let curX = 0;
for (const text of this.textArr) {
const w = this.ctx.measureText(text).width;
for (let i = 0; i < this.textArr.length; i++) {
const w = this.ctx.measureText(this.textArr[i]).width;
curX += w;
}
......@@ -699,7 +696,7 @@ export class RichTextOld extends Label {
const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
.onComplete(function() {
if (callBack) {
callBack();
}
......@@ -735,7 +732,7 @@ export class RichTextOld extends Label {
const w = this.ctx.measureText(this.textArr[i]).width;
if ((i + 1) % 2 === 0) {
if ((i + 1) % 2 == 0) {
this.ctx.fillStyle = '#c8171e';
} else {
this.ctx.fillStyle = '#000000';
......@@ -760,7 +757,7 @@ export class RichText extends Label {
disH = 30;
constructor(ctx?: any) {
constructor(ctx) {
super(ctx);
// this.dataArr = dataArr;
......@@ -794,12 +791,12 @@ export class RichText extends Label {
for (const c of chr) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) {
temp += ' ' + c;
for (let a = 0; a < chr.length; a++) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (chr[a])).width <= w) {
temp += ' ' + chr[a];
} else {
row.push(temp);
temp = ' ' + c;
temp = ' ' + chr[a];
}
}
row.push(temp);
......@@ -839,40 +836,6 @@ export class RichText extends Label {
export class LineRect extends MySprite {
lineColor = '#ffffff';
lineWidth = 10;
setSize(w, h) {
this.width = w;
this.height = h;
}
drawLine() {
this.ctx.beginPath();
this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY + this.height);
this.ctx.lineTo(this._offX, this._offY + this.height);
this.ctx.closePath();
this.ctx.lineWidth = this.lineWidth;
// this.ctx.fillStyle = "rgb(2,33,42)"; //指定填充颜色
// this.ctx.fill(); //对多边形进行填充
this.ctx.strokeStyle = this.lineColor; // "#ffffff";
this.ctx.stroke();
}
drawSelf() {
super.drawSelf();
this.drawLine();
}
}
export class ShapeRect extends MySprite {
......@@ -931,83 +894,7 @@ export class ShapeCircle extends MySprite {
}
}
export class ShapeRectNew extends MySprite {
radius = 0;
fillColor = '#ffffff';
strokeColor = '#000000';
fill = true;
stroke = false;
lineWidth = 1;
setSize(w, h, r) {
this.width = w;
this.height = h;
this.radius = r;
}
setOutLine(color, lineWidth) {
this.stroke = true;
this.strokeColor = color;
this.lineWidth = lineWidth;
}
drawShape() {
const ctx = this.ctx;
const width = this.width;
const height = this.height;
const radius = this.radius;
ctx.save();
ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
// 矩形下边线
ctx.lineTo(radius, height);
// 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
// 矩形左边线
ctx.lineTo(0, radius);
// 左上角圆弧,弧度从PI到3/2PI
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
// 上边线
ctx.lineTo(width - radius, 0);
// 右上角圆弧
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
// 右边线
ctx.lineTo(width, height - radius);
ctx.closePath();
if (this.fill) {
ctx.fillStyle = this.fillColor;
ctx.fill();
}
if (this.stroke) {
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
ctx.restore();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class MyAnimation extends MySprite {
......@@ -1054,13 +941,13 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = true;
}
_refreshSize(img: any) {
_refreshSize(img) {
if (this.width < img.width) {
this.width = img.width;
if (this.width < img['width']) {
this.width = img['width'];
}
if (this.height < img.height) {
this.height = img.height;
if (this.height < img['height']) {
this.height = img['height'];
}
}
......@@ -1089,14 +976,14 @@ export class MyAnimation extends MySprite {
}
showAllFrame() {
for (const frame of this.frameArr ) {
frame.alpha = 1;
for (let i = 0; i < this.frameArr.length; i++) {
this.frameArr[i].alpha = 1;
}
}
hideAllFrame() {
for (const frame of this.frameArr) {
frame.alpha = 0;
for (let i = 0; i < this.frameArr.length; i++) {
this.frameArr[i].alpha = 0;
}
}
......@@ -1181,7 +1068,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
if (callBack) {
tween.onComplete(() => {
callBack();
callBack(item);
});
}
if (easing) {
......@@ -1189,7 +1076,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
}
if (update) {
tween.onUpdate( (a, b) => {
update(a, b);
update(item);
});
}
......@@ -1197,7 +1084,26 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
return tween;
}
export function tweenChangeSS(item, obj, time = 0.8, callBack = null, easing = null, update = null) {
const tween = new TWEEN.Tween(item).to(obj, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
if (update) {
tween.onUpdate( (a, b) => {
update(a, b);
});
}
tween.start();
return tween;
}
export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) {
......@@ -1235,8 +1141,57 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul
return tween;
}
// 加速 easeIn
export function moveItemIn(item, x, y, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
tween.easing(TWEEN.Easing.Elastic.In);
/* if (easing) {
tween.easing(easing);
}*/
tween.start();
return tween;
}
// yoyo 动画
export function moveItemYoyo(item, x, y, time = 0.8, repeat = null, yoyo = true, easing = null, callBack = null) {
const tx = new TWEEN.Tween(item).to({ x, y }, time * 1000);
tx.repeat(repeat).yoyo(yoyo);
if (easing) {
tx.easing(easing);
}
if (callBack) {
tx.onComplete(() => {
callBack();
});
}
tx.start();
return tx;
}
export function moveBounce(item, x, y, time = 0.8, callBack = null, bounce = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (bounce) {
tween.esa(bounce);
}
tween.start();
return tween;
}
export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null, update = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
......@@ -1245,10 +1200,16 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null)
callBack();
});
}
if (easing) {
tween.easing(easing);
}
if (update) {
tween.onUpdate( (a, b) => {
update(item);
});
}
tween.start();
return tween;
......@@ -1268,7 +1229,7 @@ export function endShow(item, s = 1) {
const tween = new TWEEN.Tween(item)
.to({ alpha: 1, scaleX: s, scaleY: s }, 800)
.easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
.onComplete(function() {
})
.start();
......@@ -1276,14 +1237,14 @@ export function endShow(item, s = 1) {
export function hideItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha === 0) {
if (item.alpha == 0) {
return;
}
const tween = new TWEEN.Tween(item)
.to({alpha: 0}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -1299,7 +1260,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) {
export function showItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha === 1) {
if (item.alpha == 1) {
if (callBack) {
callBack();
}
......@@ -1310,7 +1271,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({alpha: 1}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -1328,9 +1289,9 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul
const tween = new TWEEN.Tween(item)
.to({alpha}, time * 1000)
.to({alpha: alpha}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -1350,7 +1311,7 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({alpha: 1, scale: 1}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
.onComplete(function () {
if (callBack) {
callBack();
}
......@@ -1406,22 +1367,22 @@ export function getAngleByPos(px, py, mx, my) {
const radina = Math.acos(cos); // 用反三角函数求弧度
let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
if (mx > px && my > py) {// 鼠标在第四象限
if(mx > px && my > py) {// 鼠标在第四象限
angle = 180 - angle;
}
if (mx === px && my > py) {// 鼠标在y轴负方向上
if(mx === px && my > py) {// 鼠标在y轴负方向上
angle = 180;
}
if (mx > px && my === py) {// 鼠标在x轴正方向上
if(mx > px && my === py) {// 鼠标在x轴正方向上
angle = 90;
}
if (mx < px && my > py) {// 鼠标在第三象限
if(mx < px && my > py) {// 鼠标在第三象限
angle = 180 + angle;
}
if (mx < px && my === py) {// 鼠标在x轴负方向
if(mx < px && my === py) {// 鼠标在x轴负方向
angle = 270;
}
if (mx < px && my < py) {// 鼠标在第二象限
if(mx < px && my < py) {// 鼠标在第二象限
angle = 360 - angle;
}
......@@ -1433,17 +1394,27 @@ export function getAngleByPos(px, py, mx, my) {
export function removeItemFromArr(arr, item) {
const index = arr.indexOf(item);
if (index !== -1) {
if (index != -1) {
arr.splice(index, 1);
}
}
export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
return len;
}
export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null) {
export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null, onUpdate = null) {
const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0);
......@@ -1475,7 +1446,9 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
item.x = x;
item.y = y;
if (onUpdate) {
onUpdate(item);
}
// obj.a ++;
});
......@@ -1483,13 +1456,6 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
}
export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
return len;
}
export function delayCall(callback, second) {
const tween = new TWEEN.Tween(this)
......@@ -1514,14 +1480,12 @@ export function formatTime(fmt, date) {
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds() // 毫秒
'S': date.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }
for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1)
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
}
}
return fmt;
}
......@@ -1532,9 +1496,147 @@ export function getMinScale(item, maxLen) {
return minS;
}
export function jellyStarYoyoSS(item, time = 0.7, callBack = null) {
const run = () => {
tweenChange(item, {alpha: 0.5}, time, () => {
tweenChange(item, {alpha: 1}, time, () => {
run();
});
});
};
run();
}
export function jellyStarYoyo(item, time = 0.7, callBack = null) {
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
const t = time / 9;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
let index = 0;
const run = () => {
if (index >= arr.length) {
item.jellyTween = null;
return;
}
const data = arr[index];
if (index === 3 ) {
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index = 0;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
} else {
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
}
};
const arr = [
[baseSX * 1.0, baseSY * 0.9, t],
[baseSX * 0, baseSY * 1.02, t * 2],
[baseSX * 1.0, baseSY * 0.98, t * 2],
[baseSX * 0, baseSY * 1.01, t * 2],
[baseSX * 1.0, baseSY * 1.0, t * 2]
];
run();
}
// 星星弹动画 (闪烁效果)
export function jellyStar(item, time = 0.7, callBack = null) {
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
const t = time / 9;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
let index = 0;
const run = () => {
if (index >= arr.length) {
item.jellyTween = null;
return;
}
const data = arr[index];
if (index === 3 ) {
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
if ( callBack ) {
callBack();
}
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
} else {
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
}
};
const arr = [
[baseSX * 1.0, baseSY * 0.9, t],
[baseSX * 0, baseSY * 1.02, t * 2],
[baseSX * 1.0, baseSY * 0.98, t * 2],
[baseSX * 0, baseSY * 1.01, t * 2],
[baseSX * 1.0, baseSY * 1.0, t * 2]
];
run();
}
// 果冻弹动画 + 系数
export function jellyPl(item, time = 0.7, pl = 0.2) {
/*
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
const t = time / 9;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
let index = 0;
const run = () => {
if (index >= arr.length) {
item.jellyTween = null;
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
};
const arr = [
[baseSX * 1.1, baseSY * 0.9, t],
[baseSX * (1 - pl), baseSY * (1 + pl), t * 2],
[baseSX * (1 + pl), baseSY * (1 - pl), t * 2],
[baseSX * (1 - pl), baseSY * (1 + pl), t * 2],
[baseSX * 1.0, baseSY * 1.0, t * 2]
];
export function jelly(item, time = 0.7) {
run();*/
}
// 果冻弹动画
export function jelly(item, time = 0.7, callBack = null) {
if (item.jellyTween) {
......@@ -1552,11 +1654,23 @@ export function jelly(item, time = 0.7) {
return;
}
const data = arr[index];
if (index === arr.length - 1) {
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
if (callBack) {
callBack(item);
}
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
} else {
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
}
};
const arr = [
......@@ -1564,7 +1678,7 @@ export function jelly(item, time = 0.7) {
[baseSX * 0.98, baseSY * 1.02, t * 2],
[baseSX * 1.02, baseSY * 0.98, t * 2],
[baseSX * 0.99, baseSY * 1.01, t * 2],
[baseSX * 1.0, baseSY * 1.0, t * 2],
[baseSX * 1.0, baseSY * 1.0, t * 2]
];
......@@ -1573,9 +1687,9 @@ export function jelly(item, time = 0.7) {
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
export function showPopParticle(img, pos, parent) {
const num = 20;
for (let i = 0; i < num; i ++) {
const particle = new MySprite();
......@@ -1587,8 +1701,8 @@ export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen
const randomR = 360 * Math.random();
particle.rotation = randomR;
const randomS = 0.3 + Math.random() * 0.7;
particle.setScaleXY(randomS * 0.3);
const randomS = 0.5 + Math.random() * 0.5;
particle.setScaleXY(randomS);
const randomX = Math.random() * 20 - 10;
particle.x += randomX;
......@@ -1596,32 +1710,16 @@ export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen
const randomY = Math.random() * 20 - 10;
particle.y += randomY;
const randomL = minLen + Math.random() * (maxLen - minLen);
const randomL = 40 + Math.random() * 40;
const randomA = 360 * Math.random();
const randomT = getPosByAngle(randomA, randomL);
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => {
}, TWEEN.Easing.Exponential.Out);
// scaleItem(particle, 0, 0.6, () => {
//
// });
scaleItem(particle, randomS, 0.6, () => {
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, 0.4, () => {
}, TWEEN.Easing.Exponential.Out);
setTimeout(() => {
hideItem(particle, 0.4, () => {
}, TWEEN.Easing.Cubic.In);
}, showTime * 0.5 * 1000);
scaleItem(particle, 0, 0.6, () => {
});
}
}
......@@ -1663,7 +1761,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
};
const move1 = () => {
moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => {
moveItem(item, baseX + offX, baseY + offY, time / 8, () => {
move2();
}, easing);
};
......@@ -1673,4 +1771,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}
// --------------- custom class --------------------
// 随机数
export function randomNumber(min = 0, max = 99) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import {
Label,
Label, MyAnimation,
MySprite, tweenChange,
moveItem, shake, circleMove, jelly,
randomNumber, jellyStar, jellyPl,
showPopParticle, scaleItem, moveItemIn,
moveItemYoyo, jellyStarYoyo, jellyStarYoyoSS, alphaItem
} from './Unit';
import {res, resAudio} from './resources';
......@@ -18,12 +22,12 @@ import TWEEN from '@tweenjs/tween.js';
@Component({
selector: 'app-play',
templateUrl: './play.component.html',
styleUrls: ['./play.component.css']
styleUrls: ['./play.component.scss']
})
export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
@ViewChild('canvas') canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef;
// 数据
data;
......@@ -40,31 +44,56 @@ export class PlayComponent implements OnInit, OnDestroy {
my; // 点击y坐标
yoyoTw;
picDefYoyo;
picYoyo;
// 资源
rawImages = new Map(res);
rawAudios = new Map(resAudio);
images = new Map();
viduos = new Map();
animationId: any;
winResizeEventStream = new Subject();
audioObj = {};
starPoint = []; // 星星坐标
hpStarPoint = [];
r_w = true; // true-正确 false-错误
renderArr;
mapScale = 1;
mapScaleX = 1;
mapScaleY = 1;
mic_url = '';
canvasLeft;
canvasTop;
saveKey = 'test_0011';
btnLeft;
btnRight;
saveKey = 'csm_test';
mgStatus = false; // 记录魔术状态 【false-未打开帽子 true-已打开帽子】
mbAnim; // 打开幕布动画
mgHand; // 魔术手
mgMz; // 帽子
mgMz_d; // 帽子 阴影
move_Pic = false; // 正在执行动画
mgHandStar; // 魔术手星星
mgHandStar1; // 魔术手星星
mgHandStar2; // 魔术手星星
mgHandStar3; // 魔术手星星
mgHandStar4; // 魔术手星星
mgPicShow_def; // 帽子中已弹出的图片背景
mgPicShow; // 帽子中已弹出的图片
starArr = []; // 星星数组
starHPArr = []; // 星星数组
showPic_count = 0;
imgArr = [];
pic1;
pic2;
picW;
picH;
canTouch = true;
curPic;
......@@ -83,10 +112,12 @@ export class PlayComponent implements OnInit, OnDestroy {
const getData = (<any> window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
if (data) {
this.data = data;
}
// console.log('data:' , data);
// && typeof data == 'object'
this.imgArr = data;
console.log('data:' , data);
// 初始化 各事件监听
this.initListener();
......@@ -115,7 +146,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// 预加载资源
this.loadResources().then(() => {
window["air"].hideAirClassLoading(this.saveKey, this.data);
window['air'].hideAirClassLoading(this.saveKey, this.data);
this.init();
this.update();
});
......@@ -277,6 +308,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if (now) {
audio.pause();
audio.currentTime = 0;
return;
}
if (callback) {
......@@ -286,6 +318,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
audio.play();
}
return audio;
}
......@@ -431,11 +464,12 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
/*this.data.pic_url_2 = 'assets/play/default/pic.jpg';*/
/* if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
}
}*/
}
......@@ -443,9 +477,14 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加预加载图片
*/
initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
const contentObj = this.data;
if (contentObj) {
for (let i = 0; i < contentObj.length; i++) {
if (contentObj[i].pic_url) {
this.rawImages.set(contentObj[i].pic_url, contentObj[i].pic_url);
}
}
}
}
......@@ -459,7 +498,22 @@ export class PlayComponent implements OnInit, OnDestroy {
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
// this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
this.addUrlToAudioObj('show_a', this.rawAudios.get('show_a'), 0.3);
this.addUrlToAudioObj('alp', this.rawAudios.get('alp'), 0.3);
this.addUrlToAudioObj('ck', this.rawAudios.get('ck'), 1);
this.addUrlToAudioObj('mz_1', this.rawAudios.get('mz_1'), 0.3);
this.addUrlToAudioObj('mb_1', this.rawAudios.get('mb_1'), 0.3);
const contentObj = this.data;
if (contentObj) {
for (let i = 0; i < contentObj.length; i++) {
if (contentObj[i].audio_url) {
this.addUrlToAudioObj(contentObj[i].audio_url, contentObj[i].audio_url, 1);
}
}
}
}
......@@ -470,14 +524,17 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initData() {
const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy);
this.mapScale = s;
// this.mapScale = sx;
// this.mapScale = sy;
this.mapScaleX = sx;
this.mapScaleY = sy;
console.log('sdfasdfkljaslkdfjlaskdjflkas'+this.mapScaleX);
this.renderArr = [];
......@@ -491,88 +548,201 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化试图
*/
initView() {
this.initPic();
this.initBottomPart();
this.initPoint();
this.addHpage();
this.animationMb();
}
initPoint() {
this.starPoint = [];
// 物体出现星星
const p1 = {x: this.canvasWidth / 2 + 40 * this.mapScaleX, y: this.canvasHeight / 2 - 240 * this.mapScaleY };
const p2 = {x: this.canvasWidth / 2 + 140 * this.mapScaleX, y: this.canvasHeight / 2 - 300 * this.mapScaleY };
const p3 = {x: this.canvasWidth / 2 - 80 * this.mapScaleX, y: this.canvasHeight / 2 - 200 * this.mapScaleY };
const p4 = {x: this.canvasWidth / 2 - 40 * this.mapScaleX, y: this.canvasHeight / 2 - 300 * this.mapScaleY };
const p5 = {x: this.canvasWidth / 2 + 130 * this.mapScaleX, y: this.canvasHeight / 2 - 40 * this.mapScaleY };
const p6 = {x: this.canvasWidth / 2 - 110 * this.mapScaleX, y: this.canvasHeight / 2 - 40 * this.mapScaleY };
const p7 = {x: this.canvasWidth / 2 - 200 * this.mapScaleX, y: this.canvasHeight / 2 - 150 * this.mapScaleY };
const p8 = {x: this.canvasWidth / 2 - 260 * this.mapScaleX, y: this.canvasHeight / 2 - 80 * this.mapScaleY };
const p9 = {x: this.canvasWidth / 2 - 220 * this.mapScaleX, y: this.canvasHeight / 2 + 20 * this.mapScaleY };
const p10 = {x: this.canvasWidth / 2 + 240 * this.mapScaleX, y: this.canvasHeight / 2 - 150 * this.mapScaleY };
const p11 = {x: this.canvasWidth / 2 + 140 * this.mapScaleX, y: this.canvasHeight / 2 - 150 * this.mapScaleY };
this.starPoint.push(p1);
this.starPoint.push(p2);
this.starPoint.push(p6);
this.starPoint.push(p7);
this.starPoint.push(p8);
this.starPoint.push(p9);
this.starPoint.push(p10);
this.starPoint.push(p11);
// 幕布拉开前出现星星
const hp1 = {x: this.canvasWidth / 2 + 40 * this.mapScale, y: this.canvasHeight / 2 - 240 * this.mapScale };
const hp2 = {x: this.canvasWidth / 2 + 300 * this.mapScale, y: this.canvasHeight / 2 - 230 * this.mapScale };
const hp3 = {x: this.canvasWidth / 2 + 220 * this.mapScale, y: this.canvasHeight / 2 - 150 * this.mapScale };
const hp4 = {x: this.canvasWidth / 2 + 340 * this.mapScale, y: this.canvasHeight / 2 };
const hp5 = {x: this.canvasWidth / 2 + 260 * this.mapScale, y: this.canvasHeight / 2 + 140 * this.mapScale };
const hp6 = {x: this.canvasWidth / 2 - 110 * this.mapScale, y: this.canvasHeight / 2 - 40 * this.mapScale };
const hp7 = {x: this.canvasWidth / 2 - 200 * this.mapScale, y: this.canvasHeight / 2 - 150 * this.mapScale };
const hp8 = {x: this.canvasWidth / 2 - 260 * this.mapScale, y: this.canvasHeight / 2 - 80 * this.mapScale };
const hp9 = {x: this.canvasWidth / 2 - 320 * this.mapScale, y: this.canvasHeight / 2 + 20 * this.mapScale };
const hp10 = {x: this.canvasWidth / 2 - 380 * this.mapScale, y: this.canvasHeight / 2 + 150 * this.mapScale };
const hp11 = {x: this.canvasWidth / 2 - 140 * this.mapScale, y: this.canvasHeight / 2 + 220 * this.mapScale };
const hp12 = {x: this.canvasWidth / 2 - 140 * this.mapScale, y: this.canvasHeight / 2 + 300 * this.mapScale };
const hp13 = {x: this.canvasWidth / 2 - 80 * this.mapScale, y: this.canvasHeight / 2 - 200 * this.mapScale };
const hp14 = {x: this.canvasWidth / 2 - 40 * this.mapScale, y: this.canvasHeight / 2 - 300 * this.mapScale };
const hp15 = {x: this.canvasWidth / 2 + 130 * this.mapScale, y: this.canvasHeight / 2 - 40 * this.mapScale };
const hp16 = {x: this.canvasWidth / 2 - 110 * this.mapScale, y: this.canvasHeight / 2 - 40 * this.mapScale };
const hp17 = {x: this.canvasWidth / 2 - 200 * this.mapScale, y: this.canvasHeight / 2 - 150 * this.mapScale };
const hp18 = {x: this.canvasWidth / 2 - 260 * this.mapScale, y: this.canvasHeight / 2 - 80 * this.mapScale };
const hp19 = {x: this.canvasWidth / 2 - 220 * this.mapScale, y: this.canvasHeight / 2 + 20 * this.mapScale };
const hp20 = {x: this.canvasWidth / 2 - 220 * this.mapScale, y: this.canvasHeight / 2 + 20 * this.mapScale };
this.hpStarPoint.push(hp1);
this.hpStarPoint.push(hp2);
this.hpStarPoint.push(hp3);
this.hpStarPoint.push(hp4);
this.hpStarPoint.push(hp5);
this.hpStarPoint.push(hp6);
this.hpStarPoint.push(hp7);
this.hpStarPoint.push(hp8);
this.hpStarPoint.push(hp9);
this.hpStarPoint.push(hp10);
this.hpStarPoint.push(hp11);
this.hpStarPoint.push(hp12); return;
this.hpStarPoint.push(hp13);
this.hpStarPoint.push(hp14);
this.hpStarPoint.push(hp15);
this.hpStarPoint.push(hp16);
this.hpStarPoint.push(hp17);
this.hpStarPoint.push(hp18);
this.hpStarPoint.push(hp19);
this.hpStarPoint.push(hp20);
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.btnLeft = btnLeft;
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight);
this.btnRight = btnRight;
}
// 添加幕布
animationMb() {
if (this.mic_url) {
this.playAudio(this.mic_url, true);
}
this.picW = 265;
this.picH = 265;
this.mgStatus = false;
this.move_Pic = true;
this.showPic_count = 0;
const mbAni = new MyAnimation();
for (let i = 1 ; i <= 8 ; i++) {
const mbImg = this.images.get('mb_' + i);
console.log(mbImg);
mbAni.addFrameByImg(mbImg);
}
mbAni.delayPerUnit = 0.01;
mbAni.x = this.canvasWidth / 2;
mbAni.y = this.canvasHeight / 2;
mbAni.scaleX = this.canvasWidth / mbAni.width;
mbAni.scaleY = this.canvasHeight / mbAni.height;
this.mbAnim = mbAni;
this.mbAnim.playEndFunc = () => {
this.playAudio('mz_1');
// 显示帽子&阴影&魔术手
moveItem(this.mgMz, this.canvasWidth / 2, this.canvasHeight / 2 + 150 * this.mapScaleY, 1, () => {
tweenChange(this.mgMz_d, {alpha: 1}, 0.5);
tweenChange(this.mgHand, {alpha: 1}, 0.5, () => {
this.showOrAlpStar(1);
this.renderArr.push(this.mgPicShow_def);
if (this.mgPicShow) {
this.renderArr.push(this.mgPicShow);
}
this.move_Pic = false;
this.youyouItem(this.mgHand);
});
jelly(this.mgMz, 0.5 );
}, TWEEN.Easing.Elastic.InOut);
};
// this.mbAnim.play();
this.renderArr.push(mbAni);
this.homePStar();
this.playAudio( 'mb_1');
setTimeout( () => {
this.mbAnim.play();
}, 1000);
initPic() {
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1);
this.pic1 = pic1;
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2);
this.pic2 = pic2;
this.curPic = pic1;
}
// 主界面
addHpage() {
// 首页
const hpImg = new MySprite();
hpImg.init(this.images.get('hpg'));
hpImg.x = this.canvasWidth / 2;
hpImg.y = this.canvasHeight / 2;
hpImg.scaleX = this.canvasWidth / hpImg.width;
hpImg.scaleY = this.canvasHeight / hpImg.height;
this.renderArr.push(hpImg);
// 帽子
this.mgMz = new MySprite();
this.mgMz.init(this.images.get('mz_3'));
this.mgMz.x = this.canvasWidth / 2;
this.mgMz.y = - this.mgMz.height / 2;
this.mgMz_d = new MySprite();
this.mgMz_d.init(this.images.get('mz_d'));
this.mgMz_d.alpha = 0;
this.mgMz_d.setScaleXY(this.mapScale);
this.mgMz_d.x = this.canvasWidth / 2;
this.mgMz_d.y = this.canvasHeight / 2 + 130 * this.mapScaleY + this.mgMz.height * this.mapScale / 2;
this.mgMz.setScaleXY(this.mapScale);
this.renderArr.push(this.mgMz_d);
this.renderArr.push(this.mgMz);
// 手
this.mgHand = new MySprite();
this.mgHand.init(this.images.get('invalid-name_8'));
this.mgHand.x = this.canvasWidth / 2 + 250 * this.mapScaleX ;
this.mgHand.y = this.canvasHeight / 2 + 140 * this.mapScaleY;
this.mgHand.scaleX = 0.5 * this.mapScale;
this.mgHand.scaleY = 0.5 * this.mapScale;
this.mgHand.alpha = 0;
this.renderArr.push(this.mgHand);
this.mgHandStar = new MySprite();
this.mgHandStar.init(this.images.get('星星5'));
this.mgHandStar.alpha = 0;
this.mgHandStar.x = this.mgHand.x - this.mgHand.width / 2;
this.mgHandStar.y = this.mgHand.y - this.mgHand.height / 2;
this.renderArr.push(this.mgHandStar);
// 弹出图片
this.mgPicShow_def = new MySprite();
this.mgPicShow_def.alpha = 0;
this.mgPicShow_def.init(this.images.get("def_k"));
this.mgPicShow_def.x = this.canvasWidth / 2 + 4 * this.mapScale;
this.mgPicShow_def.y = this.canvasHeight / 2 + 30 * this.mapScale;
this.mgPicShow_def.setScaleXY(0.5 * this.mapScale);
this.mgPicShow = new MySprite();
this.mgPicShow.x = this.canvasWidth / 2 + 2 * this.mapScale;
this.mgPicShow.y = this.canvasHeight / 2 + 30 * this.mapScale;
this.renderArr.push(this.mgPicShow);
}
// 魔术棒星星
mgStartAllShow() {
tweenChange(this.mgHandStar, {alpha: 1}, 0.5, () => {
btnLeftClicked() {
});
tweenChange(this.mgHandStar1, {alpha: 0.7}, 0.5, () => {
this.lastPage();
}
});
tweenChange(this.mgHandStar2, {alpha: 0.5}, 0.5, () => {
btnRightClicked() {
});
tweenChange(this.mgHandStar3, {alpha: 0.7}, 0.5, () => {
this.nextPage();
});
tweenChange(this.mgHandStar4, {alpha: 0.5}, 0.5, () => {
});
}
lastPage() {
......@@ -591,22 +761,6 @@ export class PlayComponent implements OnInit, OnDestroy {
});
}
nextPage() {
if (this.curPic == this.pic2) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic2;
});
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
}
......@@ -625,27 +779,307 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
// 点击魔术手
if ( this.checkClickTarget(this.mgHand) ) {
if (this.move_Pic) {
return;
}
this.move_Pic = true;
if (!this.mgStatus) {
this.playAudio('ck');
this.mgHand.y = this.canvasHeight / 2 + 120 * this.mapScale;
const xx = this.mgHand.x;
const yy = this.mgHand.y;
// 晃动魔术棒
tweenChange(this.mgHand, {x: this.mgHand.x - 200, y: this.mgHand.y}, 1,
() => {
tweenChange(this.mgHand, {x: this.mgHand.x + 200, y: this.mgHand.y}, 0.5,
() => {
this.showPic();
},
null,
(item) => {
const r = 100;
let x = r - (xx - item.x);
if (x < 0) {
x = (xx - item.x) - r;
}
let y0 = (Math.pow(r, 2) - Math.pow(x, 2));
if (y0 <= 0) {
y0 = 0;
}
item.y = yy - Math.sqrt(y0);
const st1 = new MySprite();
st1.init(this.images.get('星星4'));
st1.x = item.x - item.width * this.mapScale / 4 + randomNumber(17, 22) * randomNumber(0, 3);
st1.y = item.y - item.height * this.mapScale / 4 - randomNumber(7, 12) * randomNumber(0, 3);
this.renderArr.push(st1);
tweenChange(st1, {alpha: 0}, 0.3);
});
},
null,
(item) => {
const r = 100 ;
let x = r - (xx - item.x);
if (x < 0) {
x = (xx - item.x) - r;
}
let y0 = (Math.pow(r, 2) - Math.pow(x, 2));
if (y0 <= 0) {
y0 = 0;
}
item.y = yy + Math.sqrt(y0);
const st1 = new MySprite();
st1.init(this.images.get('星星4'));
st1.x = item.x - item.width * this.mapScale / 4 + randomNumber(17, 22) * randomNumber(0, 3);
st1.y = item.y - item.height * this.mapScale / 4 - randomNumber(7, 12) * randomNumber(0, 3);
this.renderArr.push(st1);
tweenChange(st1, {alpha: 0}, 0.3);
});
} else {
if (this.mic_url) {
this.playAudio(this.mic_url, true);
}
this.playAudio('alp');
const def = {
alpha: 0,
x: this.canvasWidth / 2 + 4 * this.mapScale,
y: this.canvasHeight / 2 + 30 * this.mapScale,
scaleX: 0.2 * this.mapScale ,
scaleY: 0.2 * this.mapScale
};
tweenChange(this.mgPicShow_def, def, 0.5);
const sx = this.picW / this.mgPicShow.width;
const sy = this.picH / this.mgPicShow.height;
const s = Math.min(sx, sy);
const show = {
x: this.canvasWidth / 2,
y: this.canvasHeight / 2 + 30 * this.mapScale,
alpha: 0,
scaleX: 0.2 * s * this.mapScale,
scaleY: 0.2 * s * this.mapScale,
};
tweenChange(this.mgPicShow, show, 0.5);
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
const hd = {
x: this.canvasWidth / 2 + 250 * this.mapScaleX,
y: this.canvasHeight / 2 + 130 * this.mapScaleY
};
tweenChange(this.mgHand, hd, 0.5, () => {
this.youyouItem(this.mgHand);
this.move_Pic = false;
}, null, (item) => {
const st1 = new MySprite();
st1.init(this.images.get('星星4'));
st1.x = item.x - item.width * this.mapScale / 4 ;
st1.y = item.y - item.height * this.mapScale / 4;
this.renderArr.push(st1);
tweenChange(st1, {alpha: 0}, 0.3, () => {
});
});
}
this.mgStatus = !this.mgStatus;
}
}
// 物体出现
showPic() {
/* if (this.starPoint == null || this.starPoint.length < 1) {
this.initPoint();
}*/
let sct = 0;
let sct1 = 0;
if (this.starPoint != null && this.starPoint.length > 0) {
for ( let i = 0; i < this.starPoint.length; i++ ) {
this.starArr[i].alpha = 0;
this.starArr[i].init(this.images.get('星星' + randomNumber(2, 6)));
tweenChange(this.starArr[i], {alpha: 1}, randomNumber(3, 13) / 10, () => {
console.log(this.starPoint[sct]);
this.starArr[i].x = this.starPoint[sct].x;
this.starArr[i].y = this.starPoint[sct].y;
sct++;
jellyStar(this.starArr[i], 0.5, () => {
this.starArr[i].x = this.starPoint[sct1].x;
this.starArr[i].y = this.starPoint[sct1].y;
this.youyouItemYT(this.starArr[i], randomNumber(20, 40), randomNumber(5, 8) / 5);
sct1++;
});
});
}
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
console.log('已重置星星---');
if (null != this.imgArr && this.imgArr.length !== 0) {
if (this.showPic_count >= this.imgArr.length) {
this.showPic_count = 0;
}
console.log('选择用户上传图片');
const obj = this.imgArr[this.showPic_count];
this.showPic_count ++;
if (obj.pic_url != null && obj.pic_url !== "") {
this.mgPicShow.init(this.images.get(obj.pic_url));
}
if (obj.audio_url != null && obj.audio_url !== "") {
this.playAudio(obj.audio_url);
} else {
this.playAudio('show_a');
}
const sx = this.picW / this.mgPicShow.width;
const sy = this.picH / this.mgPicShow.height;
const s = Math.min(sx, sy);
this.mgPicShow.setScaleXY(s * 0.2);
const cgxy = {
x: this.canvasWidth / 2 + 2 * this.mapScale,
y: this.canvasHeight / 2 - 135 * this.mapScaleY,
scaleY: s * this.mapScale * 329 / 365,
scaleX: s * this.mapScale,
alpha: 1
};
tweenChange(this.mgPicShow, cgxy, 0.5, () => {
jelly(this.mgPicShow, 0.5, () => {
this.mic_url = obj.audio_url;
this.move_Pic = false;
});
});
} else {
this.playAudio('show_a');
}
console.log('即将移动魔术手');
// 移动魔术手
moveItem(this.mgHand, this.canvasWidth / 2 + 350 * this.mapScaleX ,
this.canvasHeight / 2 + 40 * this.mapScale, 0.3, () => {
this.youyouItem(this.mgHand);
}, null, (item) => {
console.log('移动魔术手');
const st1 = new MySprite();
st1.init(this.images.get('星星4'));
st1.x = item.x - item.width / 4 + randomNumber(17, 22) * randomNumber(0, 3) * this.mapScale;
st1.y = item.y - item.height / 4 - randomNumber(7, 12) * randomNumber(0, 3) * this.mapScale;
this.renderArr.push(st1);
tweenChange(st1, {alpha: 0}, 0.3);
});
const cgxydef = {
x: this.canvasWidth / 2 + 4 * this.mapScale,
y: this.canvasHeight / 2 - 135 * this.mapScaleY,
scaleX: 1.3 * this.mapScale,
scaleY: 1.3 * this.mapScale,
alpha: 1
};
// 弹出图片背景框
tweenChange(this.mgPicShow_def, cgxydef, 0.5, () => {
jelly(this.mgPicShow_def, 0.5, () => {
this.move_Pic = false;
});
});
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
/**/
}
youyouItemY(item, y = 0) {
if (!item) {
return;
}
return moveItemYoyo(item, item.x,
item.y + y * this.mapScale, 1, Infinity, true );
}
youyouItemYT(item, y = 20, time = 1) {
if (!item) {
return;
}
return moveItemYoyo(item, item.x,
item.y + y * this.mapScale, time, Infinity, true );
}
// 悠悠
youyouItem(item) {
if (!item) {
return;
}
return moveItemYoyo(item, item.x,
item.y + 30 * this.mapScale, 1, Infinity, true );
}
homePStar() {
// 小星星
for (let i = 0; i < this.hpStarPoint.length; i++) {
const star = new MySprite();
star.init(this.images.get('星星' + randomNumber(2, 6)));
star.x = this.hpStarPoint[i].x;
star.y = this.hpStarPoint[i].y;
star.alpha = 0;
this.starHPArr.push(star);
this.renderArr.push(star);
// 设置显示
if (i >= 0 && i < 2 ) {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.2, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.2);
});
} else if (i >= 2 && i < 4 ) {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.6, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.2);
});
} else if (i >= 4 && i < 6 ) {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.3, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.4);
});
} else if (i >= 6 && i < 8 ) {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.6, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.3);
});
} else if (i >= 8 && i < 10 ) {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.4, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.3);
});
} else if (i >= 10 && i < 12 ) {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.7, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.3);
});
} else if (i >= 12 && i < 14 ) {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.1, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.3);
});
} else if (i >= 14 && i < 16 ) {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.5, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.3);
});
} else if (i >= 16 && i < 18 ) {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.2, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.3);
});
} else {
tweenChange(this.starHPArr[i], {alpha: 1}, 0.7, () => {
tweenChange(this.starHPArr[i], {alpha: 0}, 0.3);
});
}
}
}
// 显示和隐藏星星
showOrAlpStar(alp) {
this.starArr = [];
// 小星星
for (let i = 0; i < this.starPoint.length; i++) {
if (this.starArr.length < 8) {
const star = new MySprite();
star.init(this.images.get('星星' + randomNumber(2, 6)));
console.log('小星星' + randomNumber(2, 6));
star.alpha = 0;
star.x = this.starPoint[i].x;
star.y = this.starPoint[i].y;
/* this.starPoint.push(this.starPoint[i]);*/
this.starArr.push(star);
this.renderArr.push(star);
}
// 设置显示
tweenChange(this.starArr[i], {alpha: alp}, randomNumber(7, 11) / 10, () => {
jellyStar(this.starArr[i], 0.5, () => {
// this.youyouItem(this.starArr[i]);
this.youyouItemYT(this.starArr[i], randomNumber(20, 40), randomNumber(5, 8) / 5);
});
});
}
}
mapMove(event) {
......
......@@ -3,16 +3,64 @@ const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
['mz', "assets/play/mz.png"],
['ss', "assets/play/ss.png"],
['mb_1', "assets/play/mb/mb_1.png"],
['mb_2', "assets/play/mb/mb_2.png"],
['mb_3', "assets/play/mb/mb_3.png"],
['mb_4', "assets/play/mb/mb_4.png"],
['mb_5', "assets/play/mb/mb_5.png"],
['mb_6', "assets/play/mb/mb_6.png"],
['mb_7', "assets/play/mb/mb_7.png"],
['mb_8', "assets/play/mb/mb_8.png"],
['hpg', "assets/play/mb/hpg.jpg"],
['invalid-name_9', "assets/play/mb/invalid-name_9.png"],
['invalid-name_picm_s', "assets/play/mb/invalid-name_picm_s.png"],
['invalid-name_3', "assets/play/mb/invalid-name_3.png"],
['invalid-name_4', "assets/play/mb/invalid-name_4.png"],
['invalid-name_5', "assets/play/mb/invalid-name_5.png"],
['invalid-name_6', "assets/play/mb/invalid-name_6.png"],
['invalid-name_7', "assets/play/mb/invalid-name_7.png"],
['invalid-name_8', "assets/play/mb/invalid-name_8@2x.png"],
['mz_3', "assets/play/mb/mz_3.png"],
['mz_d', "assets/play/mb/mz_d.png"],
['left', "assets/play/mb/left.png"],
['mb_show', "assets/play/mb/mb_show.png"],
['star', "assets/play/star.png"],
['def_k', "assets/play/3@2x.png"],
// ['text_bg', "assets/play/text_bg.png"],
];
for (let i = 0;i < 55 ; i++){
if (i < 10) {
res.push(['幕布序列_0000'+i,"assets/play/mb/curtain/幕布序列_0000" + i + ".png"]);
} else {
res.push(['幕布序列_000'+i,"assets/play/mb/curtain/幕布序列_000" + i + ".png"]);
}
}
/*for (let i = 2 ; i <= 6 ;i++) {
res.push(['star_'+i,"assets/play/star/" + i + "@2x.png"]);
}*/
for (let i = 2 ; i <= 6 ;i++) {
res.push(['星星'+i,"assets/play/star/星星" + i + ".png"]);
}
for (let i = 1 ; i <= 8 ;i++) {
res.push(['mb_'+i,"assets/play/mb/mb_" + i + ".png"]);
}
const resAudio = [
['click', "assets/play/music/click.mp3"],
['show_a', "assets/play/music/show_a.mp3"],
['alp', "assets/play/music/alp.mp3"],
['ck', "assets/play/music/ck.mp3"],
['mz_1', "assets/play/music/mz_1.mp3"],
['mb_1', "assets/play/music/mb_1.mp3"],
];
export {res, resAudio};
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