Commit 80149629 authored by 李维's avatar 李维

添加头部图片适配规则设定

靠左 居中
parent 63cb61e5
...@@ -143,13 +143,31 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -143,13 +143,31 @@ export default class SceneComponent extends MyCocosSceneComponent {
// 初始化头部和底部图片 // 初始化头部和底部图片
initHeaderAndFooter() { initHeaderAndFooter() {
const headerNode = cc.find("Canvas/Header");
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();
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.alignMode) {
imgNode.getComponent(cc.Sprite).spriteFrame = sf; alignMode = this.data.alignMode;
}
if(alignMode == "middle") {
const sx = imgNode.parent.width / sfSize.width;
const sy = imgNode.parent.height / sfSize.height;
imgNode.scale = Math.max(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 = -headerNode.width / 2;
imgNode.y = headerNode.height / 2;
imgNode.scale = sy
imgNode.getComponent(cc.Sprite).spriteFrame = sf;
}
}) })
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");
......
...@@ -26,10 +26,10 @@ ...@@ -26,10 +26,10 @@
"height": 282, "height": 282,
"rawWidth": 50, "rawWidth": 50,
"rawHeight": 300, "rawHeight": 300,
"borderTop": 0, "borderTop": 19,
"borderBottom": 0, "borderBottom": 22,
"borderLeft": 0, "borderLeft": 8,
"borderRight": 0, "borderRight": 8,
"subMetas": {} "subMetas": {}
} }
} }
......
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.
...@@ -5,16 +5,25 @@ ...@@ -5,16 +5,25 @@
<div style="margin: 30px;"></div> <div style="margin: 30px;"></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: 180px;"> <div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px; display: flex; height: 220px;">
<div style="width: 200px; height: 112px;"> <div style="width: 200px; height: 152px;">
<h5>页头图片:</h5> <h5>页头图片:</h5>
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="item.header_image_url" [picUrl]="item.header_image_url"
(imageUploaded)="onImageUploadSuccess($event, 'header_image_url', item)"> (imageUploaded)="onImageUploadSuccess($event, 'header_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.alignMode" (ngModelChange)="save()" style="display: inline-block; width: 100px;">
<nz-option nzValue="middle" nzLabel="居中"></nz-option>
<nz-option nzValue="left" nzLabel="靠左"></nz-option>
</nz-select>
</p>
</div>
</div> </div>
<div style="width: 200px; height: 112px; margin-left: 20px;"> <div style="width: 200px; height: 152px; margin-left: 20px;">
<h5>页尾图片:</h5> <h5>页尾图片:</h5>
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="item.footer_image_url" [picUrl]="item.footer_image_url"
......
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