Question

对于iOS和Android，如何在Appcelerator钛中裁剪一小部分大图像（例如透明框架中可见的图像视图区域）？ imageAs * * 函数无法正常工作，因为android 3.0下不支持它们。这是我的代码：

var win=Ti.UI.createWindow({backgroundColor: 'white'})

var ImageView = Titanium.UI.createImageView({
                     width:200, height:200,
                });
var cropView = Titanium.UI.createView({
                     width: 150,
                     height: 150,
                     borderColor: 'red',
                     borderWidth: 1,
                     zIndex: 1,
               });
var button= Ti.UI.createButton({
                     bottom: 30,
                     width: 60,
                     title: 'OK',
                     zIndex: 1,
                })

win.add(cropView)

Ti.Media.openPhotoGallery({
       PhotoGalleryOptionsType : Ti.Media.MEDIA_TYPE_PHOTO,
       success: function(e){
                ImageView.image=e.media;
                win.add(ImageView)
       }, });
button.addEventListener('click',function(e)
{
     // crop the visible area
})

我正在使用iOS 5和Android 2.2。谢谢你的帮助。

Answer 1

将ImageView添加到cropView（而不是win），位置和尺寸imageView，以便显示您要显示的部分（使用{{的负值） 1}}和left），然后调用top。您可以在新的图像视图中使用生成的blob，将其保存到文件中，通过电子邮件将其作为附件发送，无论您想要什么。

图像中父图像边界之外的任何部分都将被裁剪，只留下您指定的部分。

Answer 2

我做了一些小改动，现在它的全部功能。干杯！！：）

var win = Ti.UI.createWindow({
backgroundColor : 'white'
})
var orignal = Titanium.UI.createImageView({
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
left:5
});

var ImageView = Titanium.UI.createImageView({
width : 200,
height : 200

});
var cropView = Titanium.UI.createView({
top : 10,
width : 150,
height : 150,
borderColor : 'lime',
borderWidth : 1,
zIndex : 1,
left:150
});

var button = Ti.UI.createButton({
bottom : 30,
width : 60,
title : 'CROP',
zIndex : 1,
});

win.add(button);
Ti.Media.openPhotoGallery({
PhotoGalleryOptionsType : Ti.Media.MEDIA_TYPE_PHOTO,
success : function(e) {
    ImageView.image = e.media;
    orignal.image=e.media;
    cropView.add(ImageView);
    win.add(cropView);
    win.add(orignal);
},
 });

var CropedImageView = Titanium.UI.createImageView({
top : 200,
width : cropView.width,
height : cropView.height,
left:150
});

button.addEventListener('click', function(e) {
cropView.borderColor='transparent';
CropedImageView.image = cropView.toImage();
win.add(CropedImageView);
});

win.open();

Answer 3

我在Oodles Technologies工作期间学到了一些这方面的知识。这是我的贡献：

在此示例中，您将了解如何在iOS Titanium中裁剪图像。

要裁剪图像，请先创建滚动视图，然后定义 maxZoomScale，minZoomScale。

<强> maxZoomScale： - 可滚动区域的最大比例因子及其内容。

<强> minZoomScale： - 可滚动区域的最小缩放因子及其内容

maxZoomSale和minZoomScale我们可以根据需要进行调整。

然后我们必须在scrollview中添加图像视图，然后我们可以放大和缩小图像，裁剪图像只需要点击裁剪按钮。

var window = Ti.UI.createWindow({
    backgroundColor : 'white'
});

var scrollView = Ti.UI.createScrollView({
    height : 260,
    width : Ti.UI.FILL,
    maxZoomScale : 4.0,
    minZoomScale : 1.0,
    zoomScale : 1.0,
});

window.add(scrollView);

var imageView = Ti.UI.createImageView({
    height : scrollView.height,
    width : scrollView.width,
    backgroundColor : "transparent",
    anchorPoint : {
        x : 0.5,
        y : 0.5
    },
    image : 'Default-568h@2x.png',
});

scrollView.add(imageView);

var button = Ti.UI.createButton({
    top : 20,
    title : 'Crop Button'
});
window.add(button);

button.addEventListener('click', function(e) {
    button.hide();
    var cropimage = scrollView.toImage();

    var cropImageView = Ti.UI.createImageView({
        top : 20,
        height : 120,
        width : 120,
        image : cropimage
    });

    window.add(cropImageView);
});
window.open();

钛 - 图像的裁剪部分

3 个答案: