【发布时间】：2016-07-06 01:43:17
【问题描述】：
我已成功更改 html5smartimage 组件的 aspectRatioConfig 以用自定义纵横比替换默认的“免费裁剪”，但是我正在努力寻找一种方法来选择我的自定义纵横比作为裁剪图像时的默认选择。本质上，我想默认为我的自定义纵横比，而不是让用户从纵横比列表中选择它（在这种情况下只有一个值）。这可能吗？有人可以帮忙吗？
这是我用我的自定义配置替换免费裁剪的代码，我在想设置可用纵横比的选中值（在下面的 initComponent 中）会触发所选事件，但它也不会出现。如何默认选择的纵横比？或者可能触发选定的事件？
(function($, undefined) {
/**
* Determine the scaling ratio the image component might have applied
*
* @param data contains `imgWidth` and `imgHeight` keys
* @returns {number} is the scaling ratio, 1 if no scaling was applied.
*/
function getScalingRatio(data) {
var scaleRatio = 1;
if (data.imgWidth > 1280 || data.imgHeight > 1280) {
if (data.imgWidth > 1280) {
scaleRatio = 1280 / data.imgWidth;
} else {
scaleRatio = 1280 / data.imgHeight;
}
}
return scaleRatio;
}
/**
* Wrapper for the HTML5 aspect ratio aware
*
* @type {void|*}
*/
window.CQTG = $.extend(window.CQTG || {}, {
Html5SmartImageWrapper: CQ.Ext.extend(CQ.Ext.Panel, {
/**
* Initialize panel
*
* @param originalConfig
*/
constructor: function (originalConfig) {
// initialize the container so we get some useful information
CQTG.Html5SmartImageWrapper.superclass.constructor.call(this, $.extend({}, originalConfig, {
layout: 'fit',
bodyStyle: 'padding: 0;',
items: {
title: null,
header: false,
frameHeader: false,
border: false
}
}));
// find the data path for this container instance
originalConfig.imagePath = this.findParentByType('dialog').responseScope.path;
// get rid of panel and replace with smart image
this.removeAll();
// add add html5 smart image to the container
this.add(new CQTG.Html5SmartImage(originalConfig));
}
}),
Html5SmartImage: CQ.Ext.extend(CQ.html5.form.SmartImage, {
/**
* Initialize data-members
*
* @param config
*/
constructor: function (config) {
config = config || {};
var aInfo = this.getAspectRatioString(config.imagePath);
// setup some default values
config = CQ.Util.applyDefaults(config, {
"cropConfig": {
"aspectRatios": {
"newsholeCrop": {
"text": "Newshole crop",
"value": aInfo.aspectRatio
}
}
}
}
);
CQTG.Html5SmartImage.superclass.constructor.call(this, config);
// first tool is the crop (rest has been disabled)
this.imageToolDefs[0].cropMinWidth = aInfo.minWidth;
this.imageToolDefs[0].cropMinHeight = aInfo.minHeight;
},
/**
* Retrieve the bounding box and concoct a aspect ratio based on it
*
* There is some additional magic here because the image component uses a rendition,
* not the original and bases all its pixel calculations on it without scaling it back
* up. That is why the scaleRatio is determined
*/
getAspectRatioString: function (cmpPath) {
var
boundingBoxLocation = cmpPath.substring(0, cmpPath.lastIndexOf('/')),
data = CQ.Util.eval(boundingBoxLocation + ".crop.json"),
roundX = Math.ceil(data.aspectX * 100),
roundY = Math.ceil(data.aspectY * 100),
scaleRatio = getScalingRatio(data)
;
return {
aspectRatio: (roundX + "," + roundY),
minWidth: Math.ceil(data.minCropWidth * scaleRatio),
minHeight: Math.ceil(data.minCropHeight * scaleRatio)
};
},
initComponent: function () {
CQTG.Html5SmartImage.superclass.initComponent.call(this);
var cropTool = null;
CQ.Ext.each(this.imageToolDefs, function(tool){
if(tool.toolId == "smartimageCrop"){
cropTool = tool;
}
});
var userInterface = cropTool.userInterface;
this.on("loadimage", function(){
var aRatios = userInterface.aspectRatioMenu.findByType("menucheckitem");
if(!aRatios[0].checked || !aRatios[0].initialConfig.checked){
aRatios[0].checked = true;
aRatios[0].initialConfig.checked = true;
}
});
}
})
});
CQ.Ext.reg("ffx.html5smartimage", CQTG.Html5SmartImageWrapper);
})($CQ);
【问题讨论】：