我有示例应用程序，我在轮播中添加了一些图像，并尝试放大和缩小图像，我面临的问题是只有轮播中的第一张图像响应放大和缩小，无法缩放其余图像轮播中的图像
这是示例代码：
Ext.define("PinchTest.view.Main", {
//extend: 'Ext.List',
extend: 'Ext.Carousel',
xtype: 'stcrop',
require: [
'Ext.Img',
'Ext.Loader'
],
config: {
layout: {
type: 'fit',
pack: 'center'
},
scrollable: false,
image: null,
imageWidth: 140,
imageHeight: 180,
imageAdded: false
},
initialize: function () {
var me = this;
me.callParent();
// // me.setImage(me.config.image);
// me.setImage("resources/images/CAK_SCA6REDVELV_RedVelvet_GEN_11_OU_SQ.jpg");
// me.addImage();
var carouse = Ext.create('Ext.Carousel', {
id: 'carose',
scope: this
});
var imgArray = [];
var images = ["resources/images/CAK_SCA6REDVELV_RedVelvet_GEN_11_OU_SQ.jpg", "resources/images/Home_Blue_Icon.png", "resources/images/twitter.png"];
Ext.each(images, function (picture) {
//var i = 0;
imgArray.push({
xtype: 'image',
cls: 'br0',
src: picture
});
console.log(picture);
me.setImage(picture);
me.addImage(picture);
});
carouse.setItems(imgArray);
carouse.setActiveItem(0);
this.add(carouse);
},
addImage: function (picture) {
console.log(this.getImage());
//console.log(this.getImageAdded());
// if (!this.getImageAdded(picture)) {
//if()
var c = Ext.create('Ext.Container', {
cls: 'stcrop-picture',
width: '100%',
height: '100%',
cls: 'stcrop-image-container',
style: 'margin:auto;background-size:100%;background-image:url(' + this.getImage() + ');background-position:center center;background-repeat:no-repeat;',
draggable: {
constraint: {
min: { x: 0, y: 0 },
max: { x: 0, y: 0 }
},
listeners: {
dragstart: {
fn: this.dragStart,
order: 'before',
scope: this
},
drag: this.drag,
dragend: this.dragEnd,
scope: this
}
}
});
c.element.on('tap', this.tap, this);
c.element.on('pinchstart', function (e) {
var xa = e.touches[0].pageX,
xb = e.touches[1].pageX,
ya = e.touches[0].pageY,
yb = e.touches[1].pageY,
x = Math.abs(xa - xb),
y = Math.abs(ya - yb),
h = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
this.h = h;
}, this);
c.element.on('pinch', function (e) {
var xa = e.touches[0].pageX,
xb = e.touches[1].pageX,
ya = e.touches[0].pageY,
yb = e.touches[1].pageY,
x = Math.abs(xa - xb),
y = Math.abs(ya - yb),
h = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
var p = parseInt(e.target.parentNode.style.backgroundSize);
((this.h - h) > 0) ? p-- : p++;
e.target.parentNode.style.backgroundSize = p + '%';
this.h = h;
}, this);
c.element.on('pinchend', function () { console.log('pinchend') });
this.add(c);
//this.setImageAdded(true);
//}
return c;
},
tap: function (e) {
if (typeof this.cropper !== 'undefined') { this.cropper.destroy(); }
},
dragStart: function (d, e, x, y) {
console.log(e.getTarget().className);
var x = e.startX,
y = e.startY;
if (e.getTarget().className.indexOf('stcrop-image-container') === -1) { return false; }
this.tap();
this.cropper = Ext.create('Ext.Container', {
height: 1,
width: 1,
top: y,
left: x,
style: 'position:absolute;z-index:10;border:1px dashed #333;background-color:rgba(0,0,0,0.3);'
});
Ext.Viewport.add(this.cropper);
this.cropper.show();
},
drag: function (d, e, x, y) {
var c = this.cropper,
w = Math.max(e.startX, e.pageX) - Math.min(e.startX, e.pageX),
h = Math.max(e.startY, e.pageY) - Math.min(e.startY, e.pageY);
if (e.startX > e.pageX) { c.setLeft(e.startX - w); }
if (e.startY > e.pageY) { c.setTop(e.startY - h); }
c.setHeight(h);
c.setWidth(w);
},
dragEnd: function (d, e, x, y) {
var c = this.cropper;
c.setHtml('<div class="stcrop-tab tab-top-left"></div>' +
'<div class="stcrop-tab tab-top"></div>' +
'<div class="stcrop-tab tab-top-right"></div>' +
'<div class="stcrop-tab tab-left"></div>' +
'<div class="stcrop-tab tab-right"></div>' +
'<div class="stcrop-tab tab-bottom-left"></div>' +
'<div class="stcrop-tab tab-bottom"></div>' +
'<div class="stcrop-tab tab-bottom-right"></div>');
c.setDraggable({
constraint: {
min: { x: parseInt(-c.getLeft()), y: parseInt(-(c.getTop() - this.element.dom.parentNode.offsetTop)) },
max: { x: parseInt(this.getImageWidth() - (c.getLeft() + c.getWidth())), y: parseInt(this.getImageHeight() - (c.getTop() + c.getHeight() - this.element.dom.parentNode.offsetTop)) }
}
});
console.log('top : ' + parseInt(c.getTop() - this.element.dom.parentNode.offsetTop));
console.log('left : ' + c.getLeft());
console.log('height : ' + c.getHeight());
console.log('width : ' + c.getWidth());
}
});