用滑塊縮放ImageView

我有一個（幾乎）二次ImageView包含圖像和滑塊，應該允許用戶縮放ImageView邊框內的圖像。圖像應該始終堅持ImageView的邊界，所以我想要一個沒有任何尺寸變化的縮放功能。目前，我的圖像已經初始化過大，如果我觸發滑塊，它會變得越來越大。用滑塊縮放ImageView

我的XML：

<View id=imageContainer> 
    <ImageView id="picture" top="0" left="30" height="120" width="120"></ImageView> 
    <View id="imagePreferences"> 
     <Label id="scaleLabel">Foto skalieren</Label> 
     <Slider id="scaleSlider" onChange="scalePicture"></Slider> 
    </View> 
</View>

我TSS

"#imageContainer": { 
    top: "80", 
    left: "0", 
    height: "120", 
    width: "90%" 
} 
"#picture": { 
    top: "0", 
    left: "0", 
    height: "120", 
    width: "40%" 
} 
"#imagePreferences": { 
    top: "0", 
    right: "0", 
    height: "120", 
    width: "40%" 
} 
"#scaleLabel": { 
    top: "0", 
    left: "0", 
    height: "10", 
    font: { 
     fontSize: 8 
    } 
} 
"#scaleSlider": { 
    top: "10", 
    left: "0", 
    min: "0", 
    max: "100", 
    value: "0", 
    height: "10", 
    thumbImage: "/media/slider_btn.png" 
}

而我的JS：

var image; 
var imageSet = false; 
var imageMatrix; 

var file = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "savedChallengeImage.jpeg"); 
if(file) { 
    $.picture.setImage(file); 
    image = file; 
    imageSet = true; 
    imageMatrix = Titanium.UI.create2DMatrix(); 
} 
function scalePicture(e) { 
    if (imageSet) { 
     var scale = Titanium.UI.createAnimation(); 
     imageMatrix = imageMatrix.scale(e.Value); 
     scale.transform = imageMatrix; 
     scale.duration = 0; 
     $.picture.animate(scale); 
    } 
}

來源

2014-10-09 Robin Ellerkmann

嘗試爲'＃scaleSlider'設置'min：'-10'''max：'10''和'value：'0'' – Swanand 2014-10-09 13:27:48

我想通了我自己。在閱讀this entry後，我決定嘗試一樣。解決方案是將imageView包裝在一個scrollView中。

我的新的XML：

<ScrollView id="imageScrollView"> 
    <ImageView id="picture"></ImageView> 
</ScrollView>

我的新TSS：

"#imageScrollView": { 
    top: "0", 
    left: "0", 
    height: "120", 
    width: "47%", 
    showHorizontalScrollIndicator: "false", 
    showVerticalScrollIndicator: "false", 
    maxZoomScale: "10", 
    minZoomScale: "1", 
    backgroundColor: "transparent" 
} 
"#picture": { 
    top: "0", 
    left: "0", 
    height: "100%", 
    width: "100%" 
} 
"#scaleSlider": { 
    top: "10", 
    left: "0", 
    min: "1", 
    max: "10", 
    value: "1", 
    height: "10", 
    thumbImage: "/media/slider_btn.png" 
}

最後但並非最不重要的我的js。請注意，我還需要在另一個函數中旋轉我的imageView，這會在使用相同的2D矩陣時導致幾個問題，因此我還提供了旋轉代碼。

var image; 
var imageSet = false; 
var imageMatrix; 
var rotation = 0; 
var scaleValue = 1; 

var file = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "Image.jpeg"); 
if(file) { 
    $.picture.setImage(file); 
    image = file; 
    imageSet = true; 
    imageMatrix = Titanium.UI.create2DMatrix(); 
} 

var profilePictureState = function() { 
    Ti.API.info('Switch value: ' + $.profilePictureSwitch.value); 
}; 

function rotate() { 
    if (imageSet) { 
     rotation += 1; 
     rotation = rotation%4; 

     var spin = Titanium.UI.createAnimation(); 
     spin.duration = 0; 

     imageMatrix = imageMatrix.rotate(90); 
     spin.transform = imageMatrix; 
     $.picture.animate(spin); 
    } 
} 

function scalePicture(e) { 
    if (imageSet) { 
     var scale = Titanium.UI.createAnimation(); 
     imageMatrix = Titanium.UI.create2DMatrix(); 
     imageMatrix = imageMatrix.rotate(90*rotation); 
     scale.duration = 0; 
     scaleValue = e.value.toFixed(2); 
     imageMatrix = imageMatrix.scale(parseFloat(scaleValue), parseFloat(scaleValue)); 
     scale.transform = imageMatrix; 
     $.picture.animate(scale);  
    } 
}

我仍然需要調整縮放功能一點點，但至少在iOs模擬器中它工作得很順利。

來源

2014-10-10 08:54:41

用滑塊縮放ImageView

回答

相關問題