Scale ImageView с слайдером

Question

У меня есть (почти) квадратичный 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" 
} 

И мои ЯШ:

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

Answer 1

я понял это сам. Прочитав this entry, я решил попробовать то же самое. Решение состоит в том, чтобы обернуть изображениеView в 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. Обратите внимание, что мне также нужно повернуть изображение в другой функции, которая вызвала несколько проблем при использовании одной и той же 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 это работает довольно гладко.