Skip to content

Commit

Permalink
fix: fix image info edit
Browse files Browse the repository at this point in the history
  • Loading branch information
Fi committed Dec 27, 2021
1 parent 02ec07b commit 49fee5b
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 78 deletions.
2 changes: 1 addition & 1 deletion dist/easy-canvas.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/easy-canvas.min.js.map
View file

Large diffs are not rendered by default.

162 changes: 87 additions & 75 deletions lib/image.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import View from './view'
import STYLES from './constants'
import { isExact, isAuto, isWX } from './utils'
import { getImage } from './weapp-adapter'
import View from "./view";
import STYLES from "./constants";
import { isExact, isAuto, isWX } from "./utils";
import { getImage } from "./weapp-adapter";

export default class $Image extends View {

constructor(options, children) {
super(options, children)
this.type = 'image'
super(options, children);
this.type = "image";
this._imageInfo = {
width: 0,
height: 0,
Expand All @@ -18,137 +17,150 @@ export default class $Image extends View {
dx: 0,
dy: 0,
dwidth: 0,
dheight: 0
}
this.debugColor = 'blue'
this._image = null
this._layout = null
dheight: 0,
};
this.debugColor = "blue";
this._image = null;
this._layout = null;
}

init() {
super.init()
if(this.options && this.options.attrs && this.options.attrs.timeout){
super.init();
if (this.options && this.options.attrs && this.options.attrs.timeout) {
setTimeout(() => {
this._loadImage()
},this.options.attrs.timeout || 0)
}else{
this._loadImage()
this._loadImage();
}, this.options.attrs.timeout || 0);
} else {
this._loadImage();
}
}

_paint() {
this.getRender()._drawBackground(this)
this.getRender()._drawImage(this)
this.getRender()._drawBox(this)
this.getRender()._drawBackground(this);
this.getRender()._drawImage(this);
this.getRender()._drawBox(this);
}

_loadImage() {
const { mode } = this.options.attrs
const { mode } = this.options.attrs;

return new Promise((resolve, reject) => {
this.getRender().getImageInstance(this.options.attrs.src)
this.getRender()
.getImageInstance(this.options.attrs.src)
.then(({ info, image }) => {
this._imageInfo = info
this._image = image
resolve()
this._imageInfo = { ...info };
this._image = image;
resolve();

this._layoutImage()
this._layoutImage();

if (this.isVisible()) {
// if (mode === 'aspectFill' || mode === 'aspectFit') {
// // this.getLayer().onElementChange(this)
// this.getLayer().repaint(this)
// } else {
// // 重新布局绘制
this.getLayer().reflowElement(this)
this.getLayer().reflowElement(this);
// }
}

// call load callback
if (this.options.on && this.options.on.load) {
this.options.on.load(this)
this.options.on.load(this);
}
})
.catch(err => {
.catch((err) => {
// call error callback
if (this.options.on && this.options.on.error) {
this.options.on.error(err)
this.options.on.error(err);
}
})
})
});
});
}

// 计算图片布局
_layoutImage() {
const { contentWidth, contentHeight } = this.renderStyles
const { mode } = this.options.attrs
const { width, height } = this.styles
const { width: imageW, height: imageH } = this._imageInfo
const { contentWidth, contentHeight } = this.renderStyles;
const { mode } = this.options.attrs;
const { width, height } = this.styles;
const { width: imageW, height: imageH } = this._imageInfo;
// 根据用户设置判断图片宽高，目前支持widthfix、heightfix、平铺
let w = contentWidth
let h = contentHeight
let w = contentWidth;
let h = contentHeight;
if (!isAuto(width) && isAuto(height)) {
// width fix
w = contentWidth
h = getHeightByWidth(w, imageW, imageH)
w = contentWidth;
h = getHeightByWidth(w, imageW, imageH);
} else if (!isAuto(height) && isAuto(width)) {
// height fix
h = contentHeight
w = getWidthByHeight(h, imageW, imageH)
h = contentHeight;
w = getWidthByHeight(h, imageW, imageH);
} else if (isAuto(width) && isAuto(height)) {
// auto
w = imageW
h = imageH
} else if (mode === 'aspectFill') {
w = imageW;
h = imageH;
} else if (mode === "aspectFill") {
// 填充
if ((w / h) > (imageW / imageH)) {
this._imageInfo.swidth = imageW
this._imageInfo.sheight = getHeightByWidth(imageW, w, h)
this._imageInfo.sx = 0
this._imageInfo.sy = (imageH - this._imageInfo.sheight) / 2
if (w / h > imageW / imageH) {
this._imageInfo.swidth = imageW;
this._imageInfo.sheight = getHeightByWidth(imageW, w, h);
this._imageInfo.sx = 0;
this._imageInfo.sy = (imageH - this._imageInfo.sheight) / 2;
} else {
this._imageInfo.sheight = imageH
this._imageInfo.swidth = getWidthByHeight(imageH, contentWidth, contentHeight)
this._imageInfo.sy = 0
this._imageInfo.sx = (imageW - this._imageInfo.swidth) / 2
this._imageInfo.sheight = imageH;
this._imageInfo.swidth = getWidthByHeight(
imageH,
contentWidth,
contentHeight
);
this._imageInfo.sy = 0;
this._imageInfo.sx = (imageW - this._imageInfo.swidth) / 2;
}
} else if (mode === 'aspectFit') {
if ((w / h) > (imageW / imageH)) {
this._imageInfo.dwidth = getWidthByHeight(contentHeight, imageW, imageH)
this._imageInfo.dheight = contentHeight
this._imageInfo.dy = this.contentY
this._imageInfo.dx = (contentWidth - this._imageInfo.dwidth) / 2 + this.contentX
} else if (mode === "aspectFit") {
if (w / h > imageW / imageH) {
this._imageInfo.dwidth = getWidthByHeight(
contentHeight,
imageW,
imageH
);
this._imageInfo.dheight = contentHeight;
this._imageInfo.dy = this.contentY;
this._imageInfo.dx =
(contentWidth - this._imageInfo.dwidth) / 2 + this.contentX;
} else {
this._imageInfo.dheight = getHeightByWidth(contentWidth, imageW, imageH)
this._imageInfo.dwidth = contentWidth
this._imageInfo.dx = this.contentX
this._imageInfo.dy = (contentHeight - this._imageInfo.dheight) / 2 + this.contentY
this._imageInfo.dheight = getHeightByWidth(
contentWidth,
imageW,
imageH
);
this._imageInfo.dwidth = contentWidth;
this._imageInfo.dx = this.contentX;
this._imageInfo.dy =
(contentHeight - this._imageInfo.dheight) / 2 + this.contentY;
}
} else {
w = contentWidth
h = contentHeight
w = contentWidth;
h = contentHeight;
}
this._layout = { width: w, height: h }
this._layout = { width: w, height: h };
}

_measureLayout() {
if (this._layout) {
return this._layout
return this._layout;
} else {
return {
width: this.renderStyles.width,
height: this.renderStyles.height
}
height: this.renderStyles.height,
};
}
}

}


function getWidthByHeight(height, originWidth, originHeight) {
return height / originHeight * originWidth
return (height / originHeight) * originWidth;
}

function getHeightByWidth(width, originWidth, originHeight) {
return width / originWidth * originHeight
return (width / originWidth) * originHeight;
}
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "easy-canvas-layout",
"version": "0.1.17",
"version": "0.1.18",
"description": "A canvas lib help to easy layout in canvas.",
"miniprogram": "lib",
"main": "./lib/index.js",
Expand Down

0 comments on commit 49fee5b

Please sign in to comment.