用滑块缩放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

回答

相关问题