钛 - 图像的裁剪部分答案

【问题标题】：Titanium - Crop portion of image钛 - 图像的裁剪部分
【发布时间】：2012-12-12 12:00:26
【问题描述】：

如何在 iOS 和 android 的 appcelerator Titan 中裁剪大图像的一小部分（例如透明框架中可见的图像视图区域）？ 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。感谢您的帮助。

【问题讨论】：

标签： image titanium titanium-mobile crop

【解决方案1】：

将ImageView 添加到cropView（而不是win）、imageView 的位置和大小，以便显示您想要显示的部分（对left 和top 使用负值），以及然后拨打cropView.toImage()。您可以在新的图像视图中使用生成的 blob，将其保存到文件中，将其作为附件通过电子邮件发送，随心所欲。

图像的任何超出其父边界的部分都将被裁剪，只留下您指定的部分。

【讨论】：

【解决方案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();

【讨论】：

【解决方案3】：

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

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

要裁剪图像首先创建滚动视图，定义其maxZoomScale、minZoomScale。

最大缩放比例：- 可滚动区域及其内容的最大缩放因子。

minZoomScale:- 可滚动区域及其内容的最小缩放因子

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

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

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

【讨论】：