Skip to content

C
check
Commit a8ccd51c by Masaru Abe
Options

#10558 差し替え画像で縦横比が合わない

parent d019ff19
Showing with 180 additions and 6 deletions
abvw/js/contentview.js
...@@ -3156,7 +3156,8 @@ CONTENTVIEW.ContentPage.prototype.addPageObjects = function (pageObjects) { ...@@ -3156,7 +3156,8 @@ CONTENTVIEW.ContentPage.prototype.addPageObjects = function (pageObjects) {
obj.visible, obj.visible,
obj.dataObjects, obj.dataObjects,
obj.triggerType, obj.triggerType,
obj.objectId obj.objectId,
obj.aspectType
); );
break; break;
case 5: case 5:
...@@ -5087,6 +5088,21 @@ CONTENTVIEW.changeImageType4 = function(objTarget, nIndex, nIndex1) { ...@@ -5087,6 +5088,21 @@ CONTENTVIEW.changeImageType4 = function(objTarget, nIndex, nIndex1) {
var tmpW = objTarget[nIndex].width * tempRatioWidth; var tmpW = objTarget[nIndex].width * tempRatioWidth;
var tmpH = objTarget[nIndex].height * tempRatioHeight; var tmpH = objTarget[nIndex].height * tempRatioHeight;
var aspectType = objTarget[nIndex].aspectType;
if(aspectType == '1'){
contextObject.fillStyle = "#FFFFFF";
contextObject.fillRect(tmpX, tmpY, tmpW+1, tmpH+1);
var drawObj = CONTENTVIEW.adjustAspectRatio(tmpX, tmpY, tmpW, tmpH, imageObj.width, imageObj.height);
tmpX = drawObj.drawX;
tmpY = drawObj.drawY;
tmpW = drawObj.drawW;
tmpH = drawObj.drawH;
}
contextObject.drawImage(imageObj, tmpX, tmpY, tmpW, tmpH); contextObject.drawImage(imageObj, tmpX, tmpY, tmpW, tmpH);
//contextObject.drawImage(imageObj, objTarget[nIndex].x, objTarget[nIndex].y, objTarget[nIndex].width, objTarget[nIndex].height); //contextObject.drawImage(imageObj, objTarget[nIndex].x, objTarget[nIndex].y, objTarget[nIndex].width, objTarget[nIndex].height);
...@@ -6369,3 +6385,107 @@ CONTENTVIEW.receiveSize = function(e) { ...@@ -6369,3 +6385,107 @@ CONTENTVIEW.receiveSize = function(e) {
}; };
window.addEventListener("message", CONTENTVIEW.receiveSize, false); window.addEventListener("message", CONTENTVIEW.receiveSize, false);
//差し替え画像のアスペクト比維持対応
CONTENTVIEW.adjustAspectRatio = function(drawX, drawY, drawW, drawH, srcImageW, srcImageH){
var drawObj = {};
drawObj.drawX = drawX;
drawObj.drawY = drawY;
drawObj.drawH = drawH;
drawObj.drawW = drawW;
var tmpRatioImage;
var tmpX = drawObj.drawX;
var tmpY = drawObj.drawY;
var tmpH = drawObj.drawH;
var tmpW = drawObj.drawW;
//描画エリアが縦長か横長か判定
if( drawObj.drawW > drawObj.drawH ){
//描画エリア横長
if(srcImageW > srcImageH){
//ソース画像は横長
//描画エリアとソース画像の比率計算
var drawRatio = drawObj.drawH / drawObj.drawW;
var srcRatio = srcImageH / srcImageW;
console.log("drawRatio:" + drawRatio);
console.log("srcRatio:" + srcRatio);
if( drawRatio < srcRatio ){
tmpH = drawObj.drawH;
tmpRatioImage = drawObj.drawH / srcImageH;
tmpW = srcImageW * tmpRatioImage;
} else {
tmpW = drawObj.drawW;
tmpRatioImage = drawObj.drawW / srcImageW;
tmpH = srcImageH * tmpRatioImage;
}
} else {
//ソース画像は縦長か正方形
tmpRatioImage = drawObj.drawH / srcImageH;
tmpW = srcImageW * tmpRatioImage;
}
} else {
//描画エリア縦長か正方形
if(srcImageW > srcImageH){
//ソース画像は横長
tmpRatioImage = drawObj.drawW / srcImageW;
tmpH = srcImageH * tmpRatioImage;
if( tmpH > drawObj.drawH ){
//補正
tmpH = drawObj.drawH;
}
} else {
//ソース画像は縦長か正方形
//描画エリアとソース画像の比率計算
var drawRatio = drawObj.drawW / drawObj.drawH;
var srcRatio = srcImageW / srcImageH;
console.log("drawRatio:" + drawRatio);
console.log("srcRatio:" + srcRatio);
if( drawRatio < srcRatio ){
tmpW = drawObj.drawW;
tmpRatioImage = drawObj.drawW / srcImageW;
tmpH = srcImageH * tmpRatioImage;
} else {
tmpH = drawObj.drawH;
tmpRatioImage = drawObj.drawH / srcImageH;
tmpW = srcImageW * tmpRatioImage;
}
//tmpRatioImage = drawObj.drawH / srcImageH;
//tmpW = srcImageW * tmpRatioImage;
//if(tmpW > drawObj.drawW){
// tmpRatioImage = drawObj.drawW / srcImageW;
// tmpH = srcImageH * tmpRatioImage;
// tmpW = drawObj.drawW;
//} else {
// //drawObj.drawW = tmpW;
//}
}
}
//表示位置調整
if( drawObj.drawW > tmpW ){
//横位置調整
tmpX = tmpX + (drawObj.drawW - tmpW) / 2;
}
if( drawObj.drawH > tmpH ){
//縦位置調整
tmpY = tmpY + (drawObj.drawH - tmpH) / 2;
}
drawObj.drawX = tmpX;
drawObj.drawY = tmpY;
drawObj.drawW = tmpW;
drawObj.drawH = tmpH;
return drawObj;
};
abvw/js/contentview_CreateObjects.js
...@@ -232,7 +232,7 @@ CONTENTVIEW_CREATEOBJECT.PageObject = function (id, imageUrl, x, y, w, h, visibl ...@@ -232,7 +232,7 @@ CONTENTVIEW_CREATEOBJECT.PageObject = function (id, imageUrl, x, y, w, h, visibl
}; };
/* setup each properties */ /* setup each properties */
CONTENTVIEW_CREATEOBJECT.PageObject.prototype.setup = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, actionFunction, displayBorder, objectId) { CONTENTVIEW_CREATEOBJECT.PageObject.prototype.setup = function (mediaType, actionType, id, imageUrl, x, y, w, h, visible, actionFunction, displayBorder, objectId, aspectType) {
this.mediaType = mediaType; this.mediaType = mediaType;
this.actionType = actionType; this.actionType = actionType;
...@@ -250,6 +250,7 @@ CONTENTVIEW_CREATEOBJECT.PageObject.prototype.setup = function (mediaType, actio ...@@ -250,6 +250,7 @@ CONTENTVIEW_CREATEOBJECT.PageObject.prototype.setup = function (mediaType, actio
} }
this.objectId = objectId; this.objectId = objectId;
this.aspectType = aspectType;
}; };
...@@ -355,6 +356,7 @@ CONTENTVIEW_CREATEOBJECT.PageObject.prototype.drawPageObject = function (context ...@@ -355,6 +356,7 @@ CONTENTVIEW_CREATEOBJECT.PageObject.prototype.drawPageObject = function (context
/* init data */ /* init data */
var mediaType = this.mediaType; var mediaType = this.mediaType;
var displayBorder = this.displayBorder; var displayBorder = this.displayBorder;
var aspectType = this.aspectType;
//#11478 //#11478
var x = this.x * tempRatioWidth; var x = this.x * tempRatioWidth;
...@@ -440,7 +442,7 @@ CONTENTVIEW_CREATEOBJECT.PageObject.prototype.drawPageObject = function (context ...@@ -440,7 +442,7 @@ CONTENTVIEW_CREATEOBJECT.PageObject.prototype.drawPageObject = function (context
objTemp.h = h; objTemp.h = h;
objTemp.displayBorder = displayBorder; objTemp.displayBorder = displayBorder;
/* push to array */ /* push to array（使ってない） */
CONTENTVIEW_GENERAL.arrImage.push(objTemp); CONTENTVIEW_GENERAL.arrImage.push(objTemp);
var isSetTimeout = false; var isSetTimeout = false;
...@@ -470,6 +472,21 @@ CONTENTVIEW_CREATEOBJECT.PageObject.prototype.drawPageObject = function (context ...@@ -470,6 +472,21 @@ CONTENTVIEW_CREATEOBJECT.PageObject.prototype.drawPageObject = function (context
//END TRB00035 - Editor : Long - Date: 09/17/2013 - Summary : Fix for draw audio object at center //END TRB00035 - Editor : Long - Date: 09/17/2013 - Summary : Fix for draw audio object at center
} }
else if(mediaType == '4'){
if(aspectType == '1'){
context.fillStyle = "#FFFFFF";
context.fillRect(x, y, w, h);
var drawObj = CONTENTVIEW.adjustAspectRatio(x, y, w, h, img.width, img.height);
x = drawObj.drawX;
y = drawObj.drawY;
w = drawObj.drawW;
h = drawObj.drawH;
}
context.drawImage(img, x, y, w, h);
}
else if(mediaType == '6' && isUsedTempImg){ else if(mediaType == '6' && isUsedTempImg){
img.width = 50; img.width = 50;
img.height = 50; img.height = 50;
...@@ -744,8 +761,8 @@ CONTENTVIEW_CREATEOBJECT.text = function (mediaType, actionType, id, x, y, w, h, ...@@ -744,8 +761,8 @@ CONTENTVIEW_CREATEOBJECT.text = function (mediaType, actionType, id, x, y, w, h,
CONTENTVIEW_CREATEOBJECT.text.prototype = new CONTENTVIEW_CREATEOBJECT.PageObject(); CONTENTVIEW_CREATEOBJECT.text.prototype = new CONTENTVIEW_CREATEOBJECT.PageObject();
/* mediaType=4 list image object : extends PageObject */ /* mediaType=4 list image object : extends PageObject */
CONTENTVIEW_CREATEOBJECT.listImage = function (mediaType, id, imageUrl, x, y, w, h, visible, imageObjects, triggerType, objectId) { CONTENTVIEW_CREATEOBJECT.listImage = function (mediaType, id, imageUrl, x, y, w, h, visible, imageObjects, triggerType, objectId, aspectType) {
this.setup(mediaType, null, id, imageUrl, x, y, w, h, visible, null, null, objectId); this.setup(mediaType, null, id, imageUrl, x, y, w, h, visible, null, null, objectId, aspectType);
this.action = function () { this.action = function () {
if (triggerType == '1') { if (triggerType == '1') {
...@@ -803,6 +820,38 @@ CONTENTVIEW_CREATEOBJECT.listImage = function (mediaType, id, imageUrl, x, y, w, ...@@ -803,6 +820,38 @@ CONTENTVIEW_CREATEOBJECT.listImage = function (mediaType, id, imageUrl, x, y, w,
var tmpW = w * tempRatioWidth; var tmpW = w * tempRatioWidth;
var tmpH = h * tempRatioHeight; var tmpH = h * tempRatioHeight;
if(aspectType == '1'){
var srcImageW = imageObj.width;
var srcImageH = imageObj.height;
//var tmpRatioImage;
//
////描画エリアが縦長か横長か
//if( tmpW > tmpH ){
// //横長
//} else {
// //縦長
// if(srcImageW > srcImageH){
// tmpRatioImage = tmpW / srcImageW;
// tmpH = srcImageH * tmpRatioImage;
// } else {
// tmpRatioImage = tmpH / srcImageH;
// tmpW = srcImageW * tmpRatioImage;
// }
//
//}
contextObject.fillStyle = "#FFFFFF";
contextObject.fillRect(tmpX, tmpY, tmpW+1, tmpH+1);
var drawObj = CONTENTVIEW.adjustAspectRatio(tmpX, tmpY, tmpW, tmpH, imageObj.width, imageObj.height);
tmpX = drawObj.drawX;
tmpY = drawObj.drawY;
tmpW = drawObj.drawW;
tmpH = drawObj.drawH;
}
contextObject.drawImage(imageObj, tmpX, tmpY, tmpW, tmpH); contextObject.drawImage(imageObj, tmpX, tmpY, tmpW, tmpH);
CONTENTVIEW.flip(); CONTENTVIEW.flip();
}; };
......
abvw/js/contentview_GetData.js
...@@ -514,6 +514,12 @@ CONTENTVIEW_GETDATA.getMediaType4 = function(iValueObj) { ...@@ -514,6 +514,12 @@ CONTENTVIEW_GETDATA.getMediaType4 = function(iValueObj) {
pageObject['triggerType'] = ''; pageObject['triggerType'] = '';
} }
if (iValueObj.mediaInfo.aspectType) {
pageObject['aspectType'] = iValueObj.mediaInfo.aspectType;
} else {
pageObject['aspectType'] = '';
}
/*get image url */ /*get image url */
if (imageObjects.length > 0) { if (imageObjects.length > 0) {
pageObject['imageUrl'] = imageObjects[0].fileName; pageObject['imageUrl'] = imageObjects[0].fileName;
...@@ -1775,4 +1781,3 @@ CONTENTVIEW_GETDATA.getPageTransitionConfig = function(){ ...@@ -1775,4 +1781,3 @@ CONTENTVIEW_GETDATA.getPageTransitionConfig = function(){
CONTENTVIEW_GETDATA.ready = function(){ CONTENTVIEW_GETDATA.ready = function(){
}; };
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