我已成功更改了html5smartimage组件的aspectRatioConfig，以替换默认的＆＃34; Free crop＆＃34;使用自定义宽高比，但我很难找到一种方法来选择我的自定义宽高比作为裁剪图像时的默认选择。本质上，我想默认为我的自定义宽高比，而不是让用户从宽高比列表中选择它（在这种情况下，只有一个值）。这可能吗？有人可以帮忙吗？
这是我用自定义配置替换免费裁剪的代码，我认为设置可用宽高比的选中值（在下面的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);
答案 0 :(得分：0)
我自己排除了......当我最初发布时，我实际上并没有太远。我只需要找到正确的事件来触发aspectRatio更新。结果是我需要覆盖smartImage.js toolClicked（）方法并通过setAspectRatioUI重置aspectRatio，然后重新触发onRatioChanged
(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,
"checked": true
}
}
}
}
);
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)
};
},
/**
* override smartImage toolClicked and set default cropTool to "Newshole crop"
*/
toolClicked: function(cropTool) {
cropTool = null;
CQ.Ext.each(this.imageToolDefs, function(tool){
if(tool.toolId == "smartimageCrop"){
cropTool = tool;
}
});
CQTG.Html5SmartImage.superclass.toolClicked.call(this, cropTool);
var userInterface = cropTool.userInterface;
var aRatios = userInterface.aspectRatioMenu.findByType("menucheckitem");
if(!aRatios[0].checked){
aRatios[0].checked = true;
}
userInterface.setAspectRatioUI(aRatios[0].value);
userInterface.onRatioChanged(aRatios[0].value, aRatios[0].text);
}
})
});
CQ.Ext.reg("ffx.html5smartimage", CQTG.Html5SmartImageWrapper);
})($CQ);