如何應用sencha touch carousel中的圖像的放大和縮小功能

Question

我有示例應用程序，其中我向轉盤添加了幾張圖像，並試圖放大和縮小圖像，但我面臨的問題只是第一個在轉盤圖像在響應的放大和縮小，我不能夠放大圖像的其餘部分在轉盤中

此示例代碼：

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()); 
    } 
}); 

Answer 1

這裏是你的問題的一些退出方案。我之前使用Pinch縮放圖像來縮放圖像內容，但我不記得我使用過這兩種圖像中的任何一種。

1. https://market.sencha.com/users/134/extensions/159

2. http://www.sencha.com/forum/showthread.php?197903-Pinch-Image-with-carousel-and-working-fine