Commit f693fc6b authored by 李维's avatar 李维

添加页头和页尾背景颜色配置

parent 5c4ff2d8
...@@ -861,6 +861,8 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -861,6 +861,8 @@ export default class SceneComponent extends MyCocosSceneComponent {
// 初始化头部和底部图片 // 初始化头部和底部图片
initHeaderAndFooter() { initHeaderAndFooter() {
const headerNode = cc.find("Canvas/Header"); const headerNode = cc.find("Canvas/Header");
const footerNode = cc.find("Canvas/Footer");
loadImageByUrl(this.data.header_image_url, (sf)=>{ loadImageByUrl(this.data.header_image_url, (sf)=>{
const imgNode = cc.find("Canvas/Header/img"); const imgNode = cc.find("Canvas/Header/img");
const sfSize = sf.getOriginalSize(); const sfSize = sf.getOriginalSize();
...@@ -889,11 +891,48 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -889,11 +891,48 @@ export default class SceneComponent extends MyCocosSceneComponent {
loadImageByUrl(this.data.footer_image_url, (sf)=>{ loadImageByUrl(this.data.footer_image_url, (sf)=>{
const imgNode = cc.find("Canvas/Footer/img"); const imgNode = cc.find("Canvas/Footer/img");
const sfSize = sf.getOriginalSize(); const sfSize = sf.getOriginalSize();
const sx = imgNode.parent.width / sfSize.width;
const sy = imgNode.parent.height / sfSize.height; let alignMode = "middle";
imgNode.scale = Math.min(sx, sy) if(this.data.alignModeFooter) {
imgNode.getComponent(cc.Sprite).spriteFrame = sf; alignMode = this.data.alignModeFooter;
}
if(alignMode == "middle") {
const sx = imgNode.parent.width / sfSize.width;
const sy = imgNode.parent.height / sfSize.height;
imgNode.scale = Math.min(sx, sy)
imgNode.getComponent(cc.Sprite).spriteFrame = sf;
} else if(alignMode == "left") {
const sx = imgNode.parent.width / sfSize.width;
const sy = imgNode.parent.height / sfSize.height;
imgNode.anchorX = 0;
imgNode.anchorY = 1;
imgNode.x = -footerNode.width / 2;
imgNode.y = footerNode.height / 2;
imgNode.scale = sy
imgNode.getComponent(cc.Sprite).spriteFrame = sf;
} else if(alignMode == "right") {
const sx = imgNode.parent.width / sfSize.width;
const sy = imgNode.parent.height / sfSize.height;
imgNode.anchorX = 1;
imgNode.anchorY = 1;
imgNode.x = footerNode.width / 2;
imgNode.y = footerNode.height / 2;
imgNode.scale = sy
imgNode.getComponent(cc.Sprite).spriteFrame = sf;
}
}) })
if(this.data.bgColorHeader) {
const color = new cc.Color();
cc.Color.fromHEX(color, this.data.bgColorHeader);
footerNode.color = color;
}
if(this.data.bgColorFooter) {
const color = new cc.Color();
cc.Color.fromHEX(color, this.data.bgColorFooter);
footerNode.color = color;
}
} }
// 初始化底部按钮 // 初始化底部按钮
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<h2 style="margin-top: 10px;">页头-页尾配置</h2> <h2 style="margin-top: 10px;">页头-页尾配置</h2>
<div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px; display: flex; height: 220px;"> <div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px; display: flex; height: 250px;">
<div style="width: 200px; height: 152px;"> <div style="width: 200px; height: 152px;">
<h5>页头图片:</h5> <h5>页头图片:</h5>
<app-upload-image-with-preview <app-upload-image-with-preview
...@@ -34,6 +34,12 @@ ...@@ -34,6 +34,12 @@
</nz-select> </nz-select>
</p> </p>
</div> </div>
<div>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center; margin-top: 10px;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">背景色:</span>
<input type="text" nz-input [(ngModel)]="item.bgColorHeader" (blur)="save()" style="display: inline-block; width: 100px;">
</p>
</div>
</div> </div>
<div style="width: 200px; height: 152px; margin-left: 20px;"> <div style="width: 200px; height: 152px; margin-left: 20px;">
...@@ -42,6 +48,22 @@ ...@@ -42,6 +48,22 @@
[picUrl]="item.footer_image_url" [picUrl]="item.footer_image_url"
(imageUploaded)="onImageUploadSuccess($event, 'footer_image_url', item)"> (imageUploaded)="onImageUploadSuccess($event, 'footer_image_url', item)">
</app-upload-image-with-preview> </app-upload-image-with-preview>
<div>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center; margin-top: 10px;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">对齐:</span>
<nz-select [(ngModel)]="item.alignModeFooter" (ngModelChange)="save()" style="display: inline-block; width: 100px;">
<nz-option nzValue="middle" nzLabel="居中"></nz-option>
<nz-option nzValue="left" nzLabel="靠左"></nz-option>
<nz-option nzValue="right" nzLabel="靠右"></nz-option>
</nz-select>
</p>
</div>
<div>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center; margin-top: 10px;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">背景色:</span>
<input type="text" nz-input [(ngModel)]="item.bgColorFooter" (blur)="save()" style="display: inline-block; width: 100px;">
</p>
</div>
</div> </div>
</div> </div>
......
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