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"
}

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

Answer 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模拟器中它的工作非常顺利。

使用滑块缩放ImageView

1 个答案: