應該可以更改滑塊元素的大小。 change the width and height of image
行爲:
當我們選擇幻燈片,寬度和圖像高度被示出在輸入框。
當我們改變輸入框的寬度和高度時,圖像大小沒有像預期的那樣變化。
請讓我知道如何履行這項任務。
HTML:
<img class="imgClass ng-scope" data-ng-style="slideCTRL.changeImagesize(addOn)" ng-src="pictures/vivek/Hydrangeas.jpg" ng-if="addOn.type == 'picture'">
的Javascript:
vm.changeImagesize = function (addOn) {
var width = $(".imgContainer").width();
var height = $(".imgContainer").height();
//var height = width * (resolutionY/resolutionX);
var imagewidth=$(".dcsTextbox input.slave").val();
var imageheight=$(".dcsTextbox:eq(1) input.slave").val();
var transform = "";
var origin = "50% 50%";
if (addOn.rotationDeg === 90) {
width = $(".imgContainer").width() * (resolutionY/resolutionX);
height = $(".imgContainer").width();
origin = "0% 0%";
transform = "translateX(" + $(".imgContainer").width() + "px)";
}
if (addOn.rotationDeg === 270) {
width = $(".imgContainer").width() * (resolutionY/resolutionX);
height = $(".imgContainer").width();
origin = "0% 0%";
transform = "translateY(" + width + "px)";
}
var borderStyle = "hidden";
var addOnIndex = $scope.viewModel.selectedAddon;
if (addOnIndex !== undefined && $scope.viewModel.actSlideShow.children[$scope.viewModel.currentSlide].children[addOnIndex] === addOn) {
borderStyle = "dashed";
}
if (addOn.type === "picture") {
return {
"width":imagewidth,
"height":imageheight,
"max-width": width,
"max-height":height,
"transform": transform + " " + addOn.transform,
"transform-origin": origin,
"border-style": borderStyle,
"border-width": "thin",
"object-fit": "cover"
};
} else if (addOn.type === "text") {
return {
position: "absolute",
left: 0,
top: 0,
width: width,
height: height/resolutionY * addOn.height,
"font-size": height/resolutionY * addOn.height,
color: addOn.color,
"text-align": "center",
"border-style": borderStyle,
"border-width": "thin",
transform: transform + " " + addOn.transform,
"transform-origin": origin,
"z-index": addOn.level
};
}
};
哪裏是函數'getAddOnStyle'?我只看到'changeImagesize' – Tomer
@fatman,代碼現在已更新,請檢查。 – Upendra