I have created a label and would like to place it on certain coordinates. Is there a way I can directly set the x and y coordinates to place the label in Titanium.
Very simply, just set the top and left values to to your respective Y and X values. These are relative to the labels parent, and will not work as expected if you set the parents layout property to anything but composite:
var label1 = Ti.UI.createLabel({
color: '#900',
font: { fontSize:48 },
text: 'A simple label',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
top: 30, // Your Y coordinate
left : 20, // Your X coordinate
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
Check this guide for more information about views, and positioning.
Related
I need to create autosized text setting some box size:
text(textContent, textX, textY, textWidth, textHeight);
The problem is that the text is multilined because it can't place on one line. Ok, then I've tried to check textBounds - but it works only with one line of string. How to find bounds for text drawing in some box/rect (textWidth, textHeight)?
I am having a little difficulty understanding your question. But if you wanted to create a box that encompassed all the text you could implement something like the following:
Lets assume we have our text stored to objects like this to make the logic easier to read:
var text1 = {
"str" : "This Is Line One",
X1: 0,
Y1: 0,
X2: 300,
Y2: 100,
size:30
}
var text2 = {
"str" : "This Is Line 2",
X1: 0,
Y1: 30,
X2: 300,
Y2: 100,
size:20
}
X1,Y1 is the upper left coordinate, and X2,Y2 is the lower right.
Now we have a data model to work with. We simply have to combine the bounds into a single rectangle.
Remember:
Rectangles are Declared like this:
Rect(X,Y,Width,Height)
Which is exactly the information textBounds() gives us!
Here is a quick and dirty example of the math:
function draw() {
textSize(this.text1.size);
text(this.text1.str,this.text1.X1,this.text1.Y1,this.text1.X2,this.text1.Y2);
textSize(this.text2.size);
text(this.text2.str,this.text2.X1,this.text2.Y1,this.text2.X2,this.text2.Y2);
//Get Text Bounds object for each text
let text1box = this.font.textBounds(this.text1.str,this.text1.X1,this.text1.Y1,this.text1.size)
let text2box = this.font.textBounds(this.text2.str,this.text2.X1,this.text2.Y1,this.text2.size)
//Get the upper-left and lower-right coordinates of the bounding rectangle of all the text
let bounds = {
x1: min(text1box.X,text2box.X), //upper left x
y1: min(text1box.Y,text2box.Y), //uper left y
x2: max(text1box.x + text1box.w,text2box.x + text2box.w), //lower right x
y2: max(text1box.y + text1box.y,text2box.y + text2box.h) //lower right y
}
//if you want padding:
let padding = 2;
rect(
bounds.x1 - padding,
bounds.y1 - padding,
abs(bounds.x2, - bounds.x1) + padding, //Width of the bounding rectangle
abs(bounds.y2 - bounds.y1) + padding //Height of the bounding rectangle
)
}
To fully show the logic here is a quick diagram I made
The cool thing about this logic is that even if the text isn't lined up perfectly, it is still able to put a box around all the text.
I have a problem with jCanvas which is a framework drawing canvas and jquery.
When I set x = 0 , y = 0 The .drawRect output should be same as the pure javascript result.
I tried the document and google but I did not find anything to solve this.
Screen shoot:
Pure js result
jCanvas result
Please help me.
Many thanks.
// Pure javascript
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 100, 100);
// jCanvas
$('canvas').drawRect({
fillStyle: '#000',
x: 0, y: 0,
width: 100,
height: 100
});
To run this code, please copy and pass to this sanbox.
https://projects.calebevans.me/jcanvas/sandbox/
From jCanvas documentation:
The [.drawRect's] fromCenter property determines if a rectangle’s x and y properties lie at its center (as opposed to its top-left corner). This property is true by default.
So yeah. Your X and Y with jCanvas, refer to the center of the rectangle, unlike canvas' fillRect X and Y, which refer to the top left corner of the rectangle.
I'm a designer and very new to Framer.
Id like to be able to hide/show the navigation at the top of screen based on the direction the content below is scrolled. If I start to scroll down the page, the nav hides by moving up. And then the opposite.
Here's what I've been playing around with, but no luck so far.
scroll.on Events.Scroll, ->
if scroll.scroll > scroll.scrollY then psd.subHead.animate
properties:
y: -50
else scroll.scroll < scroll.scrollY then psd.subHead.animate
properties:
y: 0
I suppose I want to move up if scroll position is less than the current position and down if it's greater.
Any help is much appreciated!
The ScrollComponent layer has a direction property. From the docs:
scroll.direction
Current scrolling direction. Returns "up", "down", "left", or "right".
The scrolling direction is the inverse of the direction of the drag
action: when dragging downwards, you're effectively scrolling upwards.
This property is read-only.
Below is some example code to get you started. You can find the scroll.direction usage near the bottom.
Framer.Defaults.Animation = time: 0.3
scroll = new ScrollComponent
width: Screen.width
height: Screen.height
scrollHorizontal: false
backgroundColor: "blue"
contentInset:
top: 10
bottom: 10
borderRadius: 8
for i in [0..10]
layerA = new Layer
width: Screen.width - 20, height: 150
x: 10, y: 160 * i
backgroundColor: "#fff"
superLayer: scroll.content
borderRadius: 4
navBar = new Layer
x: 0
y: 0
width: Screen.width
height: 130
borderRadius: 8
backgroundColor: "red"
scroll.on Events.Scroll, ->
if scroll.direction == "up"
navBar.animate
properties:
y: 0
if scroll.direction == "down"
navBar.animate
properties:
y: -130
I'm trying to rotate an image added to my canvas using KineticJS.
I got it almost working.
I know I need to set the offset to 'move' the rotation point, that part is working.
But it is also moving to that location of the offset.
After doing some rotating I can drag my image to another location in the canvas and continue rotating around its own center.
I don't want to rotate the whole canvas, because I have multiple images on a layer.
The relevant code:
function rotateLayer() {
// Rotate bird image
var rotation = 15;
// Set rotation point:
imageDict[1].setOffsetX(imageDict[1].width() / 2);
imageDict[1].setOffsetY(imageDict[1].height() / 2);
// rotation in degrees
imageDict[1].rotate(rotation);
imageDict[1].getLayer().draw();
}
A working demo is on jsfiddle: http://jsfiddle.net/kp61vcfg/1/
So in short I want the rotation but not the movement.
How you want to rotate without movement?
KineticJS rotate objects relative it's "start point" . For example for Kinetic.Rect start points is {0, 0} - top left corner. You may move such "start point" to any position with offset params.
After a lot of trail and error I found the solution.
The trick is to set the offset during load to the half width and height to set the rotation point to the middle of the image AND don't call image.cache:
function initAddImage(imgId, imgwidth, imgheight) {
var imageObj = new Image();
imageObj.src = document.getElementById(imgId).src;
imageObj.onload = function () {
var image = new Kinetic.Image({
image: imageObj,
draggable: true,
shadowColor: '#787878',
shadowOffsetX: 2,
shadowOffsetY: 2,
width: imgwidth,
height: imgheight,
x: 150, // half width of container
y: 150, // half height of container
offset : {x : imgwidth / 2, y : imgheight / 2}, // Rotation point
imgId: imgId
});
layer.add(image);
//image.cache();
layer.draw();
imageDict[currentLayerHandle] = image;
currentLayerHandle++;
};
}
I've updated my demo to a working version:
http://jsfiddle.net/kp61vcfg/2/
I've created an SVG canvas inline in HTML, dynamically using keith-wood jquery plugin.
I've used the viewBox attribute in the SVG element to scale the contents of the SVG canvas.
Inside the SVG canvas, I have a rectangle drawn, with a repeated pattern (tiles), each a 1x1 unit.
An 800x800 board:
var svg = $(containerDiv).svg('get');
svg.configure({viewBox: minX + "" + minY + "" + width + "" + height});
var pat1 = svg.pattern('pat1', 0, 0, 1, 1, {patternUnits: 'userSpaceOnUse'});
var rectTile = svg.rect(pat1, 0, 0, 1, 1);
var rectBoard = svg.rect(0, 0, 800, 800, {fill: 'url(#pat1)'});
When the user hovers over one of the elements inside the SVG, I'd like to convert the mouse event's pageX and pageY pixel coordinates to the coordinates of the tile, given the viewBox scaling. So if the user hovers over the first tile, I'd like {x: 0, y: 0} returned, given e.pageX and e.pageY where e is the mousemove jquery event object.
How do I calculate this?
Thanks