I am developing iOS application. In that I have a requirement to crop the images while uploading the images from gallery.can any one help me how to crop the images in appcelerator for ios platform.
Thanks in advance
You can use the internal blob.imageAsCrop() method:
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.Blob-method-imageAsCropped
Properties are width, height, x, y (https://docs.appcelerator.com/platform/latest/#!/api/ImageAsCroppedDict)
It'll returns another blob which you can save or display again
Example:
var croppedImage = blob.imageAsCropped({x : 20, y : 20, width : 100, height : 100});
var imageView = Titanium.UI.createImageView({
image:croppedImage,
width: 100, height:100
});
Example 2:
Titanium.Media.openPhotoGallery({
success: function(event) {
var galleryImage = event.media;
var dict = {
x: 0,
y: 50,
width: 300,
height: 300
};
var croppedImage = galleryImage.imageAsCropped(dict);
var imageView = Ti.UI.createImageView({
image: croppedImage,
height: 'auto',
width: 'auto'
});
$.index.add(imageView);
},
cancel: function() {},
savedToPhotoGallery: true,
allowEditing: true,
mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO],
showControls: true
});
Related
I am using konva js in my project. i am having doubt how to update already existing value of shape width and height.
Ex:
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
fill: "white",
});
var layer = new Konva.Layer();
stage.add(layer);
var bg = new Konva.Rect({
x: 0,
y: 0,
width:width ,
height:height ,
fill: 'white',
draggable: false,
});
layer.add(bg);
// ---------------------------------
var update_shape=()=>{
//i want to update here <-------------just calling this function
}
now i want to update above width and height values dynamically
shape.width(newWidth);
// or
shape.setAttr('width', newWidth);
// or
shape.setAttrs({ width: newWidth });
Im just trying to let my user take a screenshot using the toDataUrl() function.
but, without a background rectangle, all pixel are transparent , and appear black .
so the solution is to dynamicly add a rectangle, generate the image, destroy the rectangle
saveImage(){
const stage=this.$parent.$refs.stage.getStage()
var stageRect = new Konva.Rect({
x:0,
y:0,
width: stage.attrs.width,
height: stage.attrs.height,
fill: 'green',
})
console.log(stage)
const backg=new Konva.Layer();
backg.add(stageRect)
stage.add(backg)
backg.setZIndex(0)
const dataURL = stage.toDataURL({ pixelRatio: 1, mimeType:"image/png" });
backg.destroy();
this.downloadURI(dataURL, 'stage.png');
},
it works (rectangle is created before all other layer) but... i can't get the size of the stage, i mean, the viewport because the user can zoom/dezoom the stage ....
any idea ?
Just use a scale to calculate background properties:
var stageRect = new Konva.Rect({({
x: -stage.x()/ stage.scaleX(),
y: -stage.y()/ stage.scaleY(),
width: stage.width() / stage.scaleX(),
height: stage.height() / stage.scaleY(),
fill: 'green',
});
Demo: https://jsbin.com/lehasitaje/2/edit?html,js,output
I would like to build a chart like this
enter image description here
Drag the red point or two blue lines on the left chart, then the chart will generate the second one on the right.
Please advice me how to do with highcharts or other chart library. Thank you very much!
There is no such feature in Highcharts, and implementation will be not so easy, but I'm not saying it's not possible. In order to achieve the similar effect, you can use renderer feature, generate the circle and lines. Then change their attributes (position and dimensions), when dragging the circle. For example:
chart: {
events: {
load() {
var chart = this,
circleWidth = 5,
circleInitPos = {
x: 100,
y: 100
},
lineWidth = 2,
indicator = chart.renderer.g('indicator').attr('zIndex', 5).add(),
leftLine = chart.renderer.rect(0, circleInitPos.y, circleInitPos.x, lineWidth)
.attr({
fill: 'blue'
})
.add(indicator),
bottomLine = chart.renderer.rect(circleInitPos.x, circleInitPos.y, lineWidth, chart.containerHeight - circleInitPos.y)
.attr({
fill: 'blue'
})
.add(indicator),
circle = chart.renderer.circle(100, 100, circleWidth)
.attr({
fill: 'red'
}).add(indicator);
circle.drag = false;
chart.container.onmousemove = function(e) {
if (circle.drag) {
let normalizedEvent = chart.pointer.normalize(e),
groupPos = indicator.getBBox(),
leftLineLen = chart.plotWidth - e.chartX,
bottomLineLen = chart.plotHeight - e.chartY;
// Recalculate dimensions
leftLine.attr({
width: e.chartX,
y: e.chartY
})
bottomLine.attr({
height: chart.containerHeight - e.chartY,
y: e.chartY,
x: e.chartX
})
circle.attr({
x: e.chartX,
y: e.chartY
})
}
}
circle.element.onmousedown = function() {
circle.drag = true
}
circle.element.onmouseup = function() {
circle.drag = false
}
}
}
},
I prepared the example which shows how to do it, so here it is: https://jsfiddle.net/rgs4v5az/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
I currently have a scrollable view to scroll through some images.
On Android it's fine, but on iOS the height seems to be a bit bigger as I have some text under the scrollable view and its being pushed down a bit on iOS, while on Android the text is right under where it should be
index.js:
var win = $.index;
if(Alloy.Globals.osname == "android"){
win.backgroundColor = "#000";
}
//If iOS
else{
win.backgroundColor = "#FFF";
}
win.orientationModes = [
Ti.UI.PORTRAIT,
Ti.UI.UPSIDE_PORTRAIT
];
function textColor(){
if(Alloy.Globals.osname == "android"){
return "#FFF";
}
else{
return "#000";
}
}
var button = Titanium.UI.createButton({
title: 'Test Button',
bottom: 30,
width: "75%",
height: "auto",
visible: false
});
var page_view = Titanium.UI.createView({
top: 10,
width: Ti.UI.SIZE,
height: "85%",
layout: "vertical",
visible: false
});
var page_descr = Titanium.UI.createLabel({
text: "This is a description",
width: "75%",
font: { fontSize: 36 },
color: textColor(),
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
});
var page_image1 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_1.jpg",
});
var page_image2 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_2.jpg",
});
var page_image3 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_3.jpg",
});
var page_image4 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_4.jpg",
});
//Change the images to the iOS images
if(Alloy.Globals.osname != "android"){
page_image1.image = "/images/screens_ios/ios_1.jpg";
page_image2.image = "/images/screens_ios/ios_2.jpg";
page_image3.image = "/images/screens_ios/ios_3.jpg";
page_image4.image = "/images/screens_ios/ios_4.jpg";
}
var image_scroller = Titanium.UI.createScrollableView({
width: "100%",
height: "auto",
showPagingControl: false,
backgroundColor: "white",
views: [page_image1, page_image2, page_image3, page_image4],
});
image_scroller.addEventListener('scrollend',function(e)
{
label_step.text = steps(image_scroller.currentPage+1);
});
//Create a view to hold the scrollable view
var view_holder = Ti.UI.createScrollView({
width: "75%",
height: "60%",
top: 5,
});
view_holder.add(image_scroller);
var label_step = Titanium.UI.createLabel({
text: "Test text",
top: 5,
width: "70%",
font: {fontSize: 21 },
color: textColor(),
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
});
var label_slide = Titanium.UI.createLabel({
text: "(Swipe to view next step)",
font: {fontSize: 19 },
top: 5,
color: textColor(),
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
width: "70%",
});
page_view.add(page_descr);
page_view.add(label_step);
page_view.add(view_holder);
page_view.add(label_slide);
//Fix fonts
if(Alloy.Globals.osname != "android"){
page_descr.width = "80%";
page_descr.top = 30;
page_descr.font = {fontSize: 19};
label_step.width = "90%";
label_step.font = {fontSize: 15};
label_slide.top = 2;
label_slide.font = {fontSize: 14};
image_scroller.top = -120;
}
else{
page_descr.width = "80%";
page_descr.top = 30;
page_descr.font = {fontSize: 15};
label_step.width = "90%";
label_step.font = {fontSize: 11};
label_slide.top = 5;
label_slide.font = {fontSize: 12};
image_scroller.top = -120;
}
win.add(page_view);
button.addEventListener('click',function(e)
{
alert("I clicked the button!");
});
win.add(button);
win.open();
The android image sizes are all: 768x735px while the iOS images are 475x475px.
Here's a screenshot of what's happening on iOS, it's pushing the text "(Swipe to view next step)" down when it should be directly below the image of the iOS home screen:
http://i.imgur.com/GfDpeDb.jpg
try after commenting the top of label_slide like,
var label_slide = Titanium.UI.createLabel({
text : "(Swipe to view next step)",
font : {
fontSize : 19
},
//top : 5,
color : textColor(),
textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
width : "70%",
});
And tell me either it works or not.
The best and easiest way to do this is to use DP values instead of percentages. If you haven't set it up or modified your tiapp.xml yet your iOS devices use DP and Android uses pixels. This is why you are seeing a difference in the layout.
Dp : Density-independent pixels. A measurement which is translated natively to a corresponding pixel measure using a scale factor based on a platform-specific "default" density, and the device's physical density.
In your tiapp.xml change the default unit to dp.
<property name="ti.ui.defaultunit" type="string">dp</property>
If you then recompile the app, clean and build it will be set up to use DP values. Try using these instead of percentages.
Details on this can be seen here -
http://docs.appcelerator.com/titanium/3.0/#!/guide/Layouts,_Positioning,_and_the_View_Hierarchy
When I create a shape or image and draw it onto the stage, on the iPad i cant scroll over the shape.
For example, if my stage is bigger than the iPad's dimensions in width or height and i want to perform a scroll to see the rest of the stage or image, the stage is locked thus not allowing me to scroll.
Can anyone explain my this is happening?
I have tried with native canvas image and this is not the case. Is this a bug? Below is my code.
var mode = "";
var points = [];
var templayer = new Kinetic.Layer();
var activeShape = '';
var color = '#46468f';
var opacity = 0.2;
var stroke;
var link;
var userMode = 'edit';
var stage = new Kinetic.Stage({
container: 'stage',
width: 768,
height: 844
});
var stageWidth = stage.getWidth();
var stageHeight = stage.getHeight();
//var background = new Kinetic.Layer();
//var bgImage = new Kinetic.Image('images/room2.jpg');
var layer = new Kinetic.Layer();
var rectGroup = new Kinetic.Group({
x: 0,
y: 0,
draggable: false
});
console.log('Adding group');
var rect = new Kinetic.Rect({
x: 0,
y: 0,
width: stageWidth,
height: stageHeight,
fill: color,
opacity: opacity,
stroke: 'black',
draggable: false,
listening: true,
name: 'rect',
type: 'productTouch',
strokeWidth: 2,
done: false
});
console.log('Adding layer');
var layer = new Kinetic.Layer();
rectGroup.add(rect);
layer.add(rectGroup);
layer.draw();
stage.add(layer);
I have had this same issue. Maybe it's one of these:
1...
Make sure some of these variables are not set... try commenting out any of these and see if the behavior changes...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, usr-scalable=no" />
2...
Check to see if you have enabled a css feature to allow scrolling to occur...
overflow-y: auto; (on some div you have?)
I fixed this bug when create layer
var layer = new Kinetic.Layer({hitGraphEnabled : false});
This is a bit of an ugly hack to try to imitate both pinchzoom and scrolling on the ipad with kinetic.js with the help of panzoom.js touchswipe.js and Jquery.kinetic.js (name is just coincidental)
https://github.com/timmywil/jquery.panzoom/blob/master/
http://davetayls.me/blog/2011/06/14/jquery-kinetic-plugin-smooth-scrolling/#disqus_thread
var isiPad = navigator.userAgent.match(/iPad/i) != null;
$(function() {
if(isiPad){
$('body, html').kinetic();
$("#wrapper").panzoom({
disablePan: true,
minScale: 1,
maxScale: 4
});
//Enable swiping...
$("#stage").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
$("#wrapper").panzoom("reset");
},
threshold:0
});
}
});