使用滑块缩放 ImageView答案

【问题标题】：Scale ImageView with a slider使用滑块缩放 ImageView
【发布时间】：2014-10-09 09:19:08
【问题描述】：

我有一个（几乎）二次 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);
    }
}

【问题讨论】：

尝试将min : '-10' max : '10' 和value : '0' 设置为#scaleSlider

标签： javascript image titanium

【解决方案1】：

我自己想出来的。阅读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 模拟器中它工作得相当顺利。

【讨论】：