Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

Move a view over an imageView in Android using Titanium

$
0
0

I am trying to crop an image in Android using Titanium. I have a view which indicates the selected area, I want to move that view to the selected position in screen. I was able to make it working partially using a commonJS module as shown below.

var CameraPreview = function(cameraImage, callbackObj){
        var platformHeight = Ti.Platform.displayCaps.platformHeight; 
        var platformWidth = Ti.Platform.displayCaps.platformWidth; 
 
        var CROP_VIEW_HEIGHT = 160; 
        var CROP_VIEW_WIDTH = 320; 
        var BOTTOM_BAR_HEIGHT = 70;
        //Window contains all the controls
        var _previewWindow = Ti.UI.createWindow({
            navBarHidden : true,
            backgroundColor : '#fff',
        });
 
        var _cropScreenContainer = Ti.UI.createView({
            height  : '100%',
            width   : '100%',
            backgroundColor : '#fff'
        });
 
        _previewWindow.add(_cropScreenContainer);
 
        var _previewImage = Ti.UI.createImageView({
            width   : platformWidth,
            image   : cameraImage,
            top     : 0,
            touchEnabled : false,
            autorotate : true
        });
 
        _cropScreenContainer.add(_previewImage);
 
        var _viewPositions = _getPositions();   //Used to get the dimensions of the crop views
 
        var _topView = Ti.UI.createView({
            backgroundColor : '#000000',
            height  : _viewPositions.initialViewHieght,
            top     : 0,
            opacity : 0.6,
            touchEnabled : false,
        });
 
        _cropScreenContainer.add(_topView);
 
        //Crop view is used to crop the image displayed
        var _cropView = Ti.UI.createView({
            borderColor : '#ffffff',
            borderWidth : 1,
            width       : CROP_VIEW_WIDTH,
            height      : CROP_VIEW_HEIGHT,
            touchEnabled: false,
            top         : _viewPositions.initialViewHieght
        });
        _cropScreenContainer.add(_cropView);
 
        var _bottomView = Ti.UI.createView({
            backgroundColor : '#000000',
            height  : _viewPositions.initialViewHieght,
            touchEnabled : false,
            top     : _viewPositions.initialViewHieght + CROP_VIEW_HEIGHT,
            opacity : 0.6
        });
        _cropScreenContainer.add(_bottomView);
 
        //Bottom bar containing the camera buttons and cancel button
        var _bottomBar = Ti.UI.createView({
            width   : '100%',
            height  : BOTTOM_BAR_HEIGHT,
            bottom  : 0,
            backgroundColor : '#000000'
        });
 
        //Retake button 
        var _retakeButton = Ti.UI.createLabel({
            text    : 'Cancel',
            color   :'#ffffff',
            left    : '3%',
            width   : Ti.UI.SIZE
        });
        //Button to chose the photo
        var _chooseButton = Ti.UI.createLabel({
            text    : 'Choose',
            color   :'#ffffff',
            right   : '3%',
            width   : Ti.UI.SIZE
        });
 
        _bottomBar.add(_retakeButton);
        _bottomBar.add(_chooseButton);
        _previewWindow.add(_bottomBar);
 
        _retakeButton.addEventListener('click', _retakePhoto);
        _chooseButton.addEventListener('click', _onUsePhoto);
        _cropScreenContainer.addEventListener('click', _moveCropViewToPosition);
 
        _previewWindow.open();
 
        /**
         * Used to move the cropview to the selected position
         */
        function _moveCropViewToPosition(event){
 
            var newPoints = _cropScreenContainer.convertPointToView( { x : event.x, y : event.y } , _previewImage );
            _cropView.top = newPoints.y;
            //Top position is set here. but it doesn't work properly
            var toast = Ti.UI.createNotification({
                message: "You have clicked at the point in cropscreen is " + newPoints.y + ' cropView top is ' + _cropView.rect.y
            });
            toast.show();
        }
 
        /**
         * Used to re open the gallery
         */
        function _retakePhoto(){
            _previewWindow.fireEvent('showCamera');
        }
 
        /**
         * Used to crop the image in the required resolution and retruns to the success callback
         */
        function _onUsePhoto(){
            var _cropViewTop = _cropView.rect.y*2;
            var ImageFactory = require('ti.imagefactory');
            var _selectedImage = _cropScreenContainer.toImage();
            var newBlob = ImageFactory.imageAsCropped(_selectedImage.media, {width:CROP_VIEW_WIDTH, height:CROP_VIEW_HEIGHT, x :0, y: _cropViewTop, format : ImageFactory.PNG });
            callbackObj.success(newBlob);
            _previewWindow.close();
        }
 
        /**
         * Returns the top of shadow view used above and below the crop view
         */
        function _getPositions(){
            var _totalHeight = platformHeight - BOTTOM_BAR_HEIGHT;
            var _topHeight = (_totalHeight-CROP_VIEW_HEIGHT)/4;
            var _cropViewContainerHeight = (2 * _topHeight) + CROP_VIEW_HEIGHT;  
            return {
                initialViewHieght: _topHeight,
                totalHeight : _totalHeight
            };
        }
 
        return _previewWindow;
    };
 
    module.exports = CameraPreview;
In the above code _moveCropViewToPosition() function is used to position the view. But it works properly till half of the screen!! So my question is,
  1. how can I move the white box and crop the image properly?

  2. How can I restrict the white box to the boundary of image?

Any help will be apreciated.


Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>