I am developing an iOS app using Appcelerator.
In this app I got a main wrapper view and some subviews. I need them to be placed under each other using the layout vertical property but they all stack in a pile (not on separate "rows").
What is wrong with the code below?
// Create the padding view
container = Ti.UI.createView({
top: 0,
left: 0,
width: 320,
height: 460,
backgroundColor: '#000'
});
// Create the padding view
wrapper = Ti.UI.createView({
top: 0,
left: 0,
width: 320,
height: 'auto',
layout: 'vertical'
});
// Create the padding view
label = Ti.UI.createLabel({
text: e.label,
color: e.color,
font:{fontSize:36,fontWeight: 'normal'},
top: 10,
width: 'auto',
height: 'auto'
});
// Create the padding view
perks_label = Ti.UI.createLabel({
text: 'Lorem Ipsum is',
color: '#fff',
font:{fontSize:26,fontWeight: 'normal'},
top: 10,
left: 10,
width: 'auto',
height: 'auto'
});
// Create the padding view
perks_data = Ti.UI.createLabel({
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer',
color: '#fff',
font:{fontSize:12,fontWeight: 'normal'},
top: 10,
left: 10,
width: 'auto',
height: 'auto'
});
// Add label to wrapper
wrapper.add(label);
// Add label to wrapper
wrapper.add(perks_label);
// Add label to wrapper
wrapper.add(perks_data);
// Add wrapper to container
container.add(wrapper);
// Return the row
return container;
It seems like the top and left of perks_label and perks_data should be different. Try setting the perks_data to top:50.
Thanks,
I've hit this wall before. Have you set the layout for the current window to 'vertical'? So, from the window that you add the container to, set its layout to vertical:
var win = Titanium.UI.currentWindow;
win.layout = 'vertical';
Related
I am new to Google earth engine and coding as well. I am trying to create an panel with a dropdown and a text box in google earth engine. The drop down menu has two options 1. link to shapefile and 2. draw your polygon. When the user selects option 1 from the menu, I want the textbox to get active else it needs to stay deactivated. If the user selects second option of drawing a polygon, I want the drawing tools to get active else stay deactivated. How do I achieve this. Please help me, Thanking you in advance.
var panel = ui.Panel();
panel.style().set({
width: '20%',
});
ui.root.insert(0,panel)
var asset = 'Use Shapefile'
var boundary = 'Draw boundary'
var geometry
var aoi
var selectboundary = ui.Select({
items:[asset, boundary],
placeholder:'Select boundary',
style: {padding: '0px 10px', stretch: 'horizontal', color: 'black'}
});
panel.add(selectboundary)
var shapefilelink = ui.Textbox({
style: {
maxWidth: '390px',
padding: '0px 10px',
stretch: 'horizontal',
color: 'black'
},
placeholder: 'users/your_username/asset_name',
onChange: function(input){
var userInput = input;
userInput = ee.String(userInput);
geometry = ee.FeatureCollection(userInput);
},
disabled: true,
});
panel.add(shapefilelink)
var startdate = ui.Textbox({
placeholder: 'Start: yyyy-mm-dd',
style: {
minWidth: '0px',
maxWidth: '200px',
padding: ('0px 0px 0px 10px' ),
color: ('black'),
},
})
var enddate = ui.Textbox({
placeholder: 'End: yyyy-mm-dd',
style: {
minWidth: '0px',
maxWidth: '200px',
padding: ('0px 0px 0px 15px' ),
color: ('black'),
},
})
panel.add(ui.Panel([startdate,enddate],ui.Panel.Layout.flow('horizontal')))
I want to assign text or label using OpenLayers to Icons. I am able to assign the label to the icon but it places text on the icon .but I want to display label at offset so icon and label both display properly. I have tried using offsetY but it is not working and does not change the placement.
var styleToponimiFunction = function(feature,resolution) {
console.log(feature);
var iconName;
if (feature.get("remark")=='Daerah Istimewa') {
iconName='daerah_istimewa2.png';
}
else if (feature.get("remark")=='Kecamatan'){
iconName='kecamatan.png';
}
iconStyle = [new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: "fraction",
anchorYUnits: "pixel",
scale:0.03,
opacity:1,
src: "icons/" + iconName,
})),
text: new ol.style.Text({
text: feature.get('namobj'),
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: 'black' }),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
textAlign: 'center',
Baseline: 'hanging',
offsetX : 0,
offsetY : -12,
}),
declutter: true,
overflow: true
}),
})
]
return iconStyle;
}
The text options should not be inside the Stroke constructor, also Baseline should be textBaseline
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
}),
textAlign: 'center',
textBaseline: 'hanging',
offsetX : 0,
offsetY : -12,
How to increase touch area of control points on mobile device with FabricJS? Because on mobile they are too small for smooth interactive with. But not change size of control points ( for nice view ).
Here is my code:
How to increase interactive of control points = view control points size x 2 ?
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
// test customize control points
var rect = new fabric.Rect({
left: 30,
top: 30,
fill: 'red',
width: 150,
height: 150
});
canvas.add(rect);
rect.set({
transparentCorners: false,
cornerColor: 'white',
cornerStrokeColor: 'rgba(14,19,24,.15)',
borderColor: 'rgba(41,198,203,1)',
selectionLineWidth: 8,
cornerSize: 12,
cornerStyle: 'circle',
});
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Please show me the way to resolve this problem.
By the way: ( on mobile device ) is there any way to allow drag object only object is selected before?
Thank you very much!
You need to override _setCornerCoords method of object and change the value of cornerHypotenuse.
DEMO
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
// test customize control points
var rect = new fabric.Rect({
left: 30,
top: 30,
fill: 'red',
width: 150,
height: 150
});
canvas.add(rect);
rect.set({
transparentCorners: false,
cornerColor: 'white',
cornerStrokeColor: 'rgba(14,19,24,.15)',
borderColor: 'rgba(41,198,203,1)',
selectionLineWidth: 8,
cornerSize: 5,
cornerStyle: 'circle'
});
rect._setCornerCoords = function() {
var coords = this.oCoords,
newTheta = fabric.util.degreesToRadians(45 - this.angle),
cornerHypotenuse = this.cornerSize * 2 * 0.707106,
cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta),
sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta),
x, y;
for (var point in coords) {
x = coords[point].x;
y = coords[point].y;
coords[point].corner = {
tl: {
x: x - sinHalfOffset,
y: y - cosHalfOffset
},
tr: {
x: x + cosHalfOffset,
y: y - sinHalfOffset
},
bl: {
x: x - cosHalfOffset,
y: y + sinHalfOffset
},
br: {
x: x + sinHalfOffset,
y: y + cosHalfOffset
}
};
}
}
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
I want to make Editable Text which is curved along a fabric.Path as bellow expected image.
Here is my code:
I created a curved fabric.Path & a fabric.TextBox, but I don't know how to curve text along that Path. Please help me resolve this problem.
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var Path_0_1 = new fabric.Path('M127.91,99.29c32.16,10.73,53.41,7.33,67.81,0 c34.07-17.34,41.99-62.82,60.98-60.98c8.19,0.79,14.11,9.98,17.91,17.91', {
fill : null,
stroke: '#000000',
});
canvas.add(Path_0_1);
var curvedText = new fabric.IText("Anh Minh", {
left: 50,
top: 50,
width: 200,
fontSize: 24,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
textAlign: 'center',
lineHeight: 1,
fill: "#404041",
});
canvas.add(curvedText);
#canvasContainer {
width: 100%;
height: 500px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Addition information:
After few hours google search, I see an interesting Konva.TextPath, I wonder If can we make same Object like that Konva.TextPath in Fabric.js?
Thank you!
I have Canvas with a few group. In group are two text and Line, i wanna resize selected Line with using Input Text. Now i have input text, and when i select a group in input text is actually height, but now i change value to text field and resize Group/Object but i have problems "border" this element which allows me resize and rotate Object. When i set SelectedObject.set({height: 300}); only border is resizing, scaledObject.item(0).set({height: 300}); only line without border, when i put this together everything is resized but border is not around object, how i can resize Object correctly with using Input Text?
I have this solution for a group that has a figure and text, I did this to maintain the text size and border width as well.
var canvas = new fabric.Canvas("c1");
reinit()
canvas.on({
'object:scaling': function(e) {
var obj = e.target,
w = obj.width * obj.scaleX,
h = obj.height * obj.scaleY,
s = obj.strokeWidth;
console.log(obj.width, obj.scaleX, h,w,s)
obj._objects[0].set({
'height' : obj.height,
'width' : obj.width,
'scaleX' : 1,
'scaleY' : 1,
h: h,
w: w
//top: 1,
//left: 1,
});
/*e.target.set({
'height' : h,
'width' : w,
'scaleX' : 1,
'scaleY' : 1
});*/
}
});
canvas.on({
'object:modified': function(e) {
console.log(e)
//e.target.set({scaleX:1, scaleY:1})
group = e.target
rect = e.target._objects[0]
rect.set({height:rect.h, width: rect.w})
console.log('r',rect.width, group.width)
text = group._objects[1]
canvas.remove(group)
canvas.add(new fabric.Group([rect,text], {
top: group.top,
left: group.left
}))
}
});
function reinit(){
var el = new fabric.Rect({
originX: "left",
originY: "top",
stroke: "rgb(0,0,0)",
strokeWidth: 1,
fill: 'transparent',
opacity: 1,
width: 200,
height: 200,
cornerSize: 6
});
var text = new fabric.IText('test', { fontSize: 16});
var group = new fabric.Group([ el, text ], {
width: 200,
height: 200,
left: 5,
top: 5,
});
canvas.add(group);
canvas.renderAll();
}
<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c1" width="600" height="500" style="border:1px solid #ccc"></canvas>
here the fiddle http://jsfiddle.net/davidtorroija/qs0ywh8k/1/
and if this is not useful to you also you have other ways in this answers:
how to display size on shape after scaled using fabric js?
Rect with stroke, the stroke line is mis-transformed when scaled
EDIT:
Here you have another perfect example!
also uses ellipses and triangles etc
http://jsfiddle.net/GrandThriftAuto/6CDFr/15/