I would like to know if there is any text direction on Phaser.js Text class
like when user input some text, then the text input in the canvas will have a text direction of right to left or left to right;
and I'm implementing this on whole canvas application
example in the normal html we can attain this using the css properties
direction:ltr,
direction:rtl
anyone has any idea on how to do it.
i was reading on the phaser.js text class but cannot find any properties to set the direction to right to left but no luck.
thanks in advance;
Since I can't find any documentation on the phaser to make this happen
then i simply just make a work around to look like i am able to make the direction
of the text to be right align.
Here is a simple text
var txt = this.game.add.text(10, 10, '0', {
font: "21px arial",
fill: "#00FF00",
align:'right',
fontWeight:'bold',
});
compute for the new position x of the txt
formula :
txt.x = contant - txt.width
the constant will be a reference point you want to offset
according to your positioning
so when the variable txt text updated
then you can re-position it again using
the the new data
txt.setText(100);
txt.x = 84 - (txt.width);
it looks like phaser text now supports rtl through this class:
Phaser.GameObjects. TextStyle
Try this:
yourApplication.canvas.setAttribute("dir", "rtl");
... where yourApplication holds the reference to your game/application. This adds an attribute to the DOM canvas element your game/application draws to (if that's what you're after).
Related
So i saw this wiggling rainbow text
https://codepen.io/mikel301292/pen/eBROMJ
So it looks like this:
var logo = "232.5,115.4,228.3,30.0,164.1,30.0&96.1,30.0,30.0,99.4,30.0,205.9&30.0,290.1,98.0,345.9,160.3,345.9&295.3,345.9,339.7,127.5,339.7,78.9&339.7,-23.4,303.7,86.4,303.7,176.9&303.7,205.8,314.4,345.9,381.8,345.9&473.4,345.9,504.8,128.4,504.8,68.9&504.8,1.4,473.0,62.6,473.0,146.1&473.0,195.5,486.6,345.7,539.8,345.7&609.9,345.7,661.0,182.9,661.0,115.9&661.0,-65.1,616.1,93.0,616.1,112.9&616.1,157.9,741.1,71.7,741.1,71.7&741.1,71.7,674.1,168.2,674.1,267.8&674.1,308.9,698.8,345.9,735.3,345.9&851.2,345.9,850.7,53.0,850.7,53.0&850.7,53.0,911.3,208.9,918.5,349.1&997.2,349.1,1024.5,189.5,1024.5,64.8&1024.5,0.8,985.4,43.5,985.4,115.4&985.4,185.6,1085.0,192.3,1135.7,192.3&1200.8,192.3,1295.4,180.3,1295.4,105.3&1295.4,71.3,1272.7,49.2,1240.6,49.2&1189.5,49.2,1124.6,125.9,1124.6,236.9&1124.6,277.0,1143.1,346.4,1206.7,346.4&1246.2,346.4,1305.1,305.9,1325.5,257.0";
And i want to change the text but i cant find any tools that can give me the right "coordinates". I tried it in Adobe Animate but its just not the same.
Why not try opentype.js? Given you have a true type or opentype font file you can then get the coordinates of a given text string and then use fabricjs to render it on a canvas. At that point you can animate it or apply different colours.
I'm trying to center something on the stage using javascript inside an Adobe Animate CC canvas doc. Before in AS3 I would have accesses to the stage property.
So I would be able to do something like this
trace(stage.width);
I tried the same in js, but doesn't seem to work.
console.log(stage.width);
Does anyone know if there is an equivalent to the stage property in create js?
In a canvas project, use stage.canvas.width
For example, if you have a clip named myClip, you can center it like this:
this.myClip.x = stage.canvas.width / 2;
container.x = (lib.properties["width"]/2);
container.y = (lib.properties["height"]/2);
you can set values to lib properties. example:
lib.properties["height"] = "800"; // change to whatever you want
You can check your main js files top lines. These lines affect the style of you main canvas tag(check with inspect element). Notice that stage.canvas.width/heigth values change with browser resizing but lib.properties not so much
check image --> using lib. properties instead of stage
I'm not sure how to change the size or position in the .js,
In Adobe Animate cc 2015.2 you simply open the .fla file and go to "publish settings" and select "centre stage" + "make responsive". this obviously for the browser.
If you mean actually positioning the stage to centre inside Animate CC.
You will find an icon next to the "zoom" (100%), just click that and it will centre your project. Image of the icon I am talking about.
In this question (Labelling the vertices in AxisHelper of THREE.js) is explained how to label axis created with THREE.AxisHelper. I tried to follow the same procedure for THREE.ArrowHelper without sucessfull. So, I'd like to know how to label the arrows I created, just like when indicating the labels of a coordinate system (x,y,z). In this link it how I tried to reproduce the idea: http://jsfiddle.net/g7oqexr8/
What exactly does not work? It does not show up? It crashes? (if so, where???)
Tip:
Why don't you add the label object to the created arrow?
instead of:
//text.position.x = arrowHelper.geometry.vertices[1].x;
//text.position.y = arrowHelper.geometry.vertices[1].y;
//text.position.z = arrowHelper.geometry.vertices[1].z;
//text.rotation = camera.rotation;
//scene.add(text);
arrowHelper.add(text);
This adds to 'text' the position, rotation and scaling from the arrowHelper.
If you want, you can modify afterwards the 'text' rotation, position or scaling.
EDIT:
Documentation stands:
TextGeometry uses typeface.json generated fonts. Some existing fonts can be found located in /examples/fonts and must be included in the page.
That's probably why line with:
var textGeo = new THREE.TextGeometry('Y', {size: 5, height: 2, curveSegments: 6,font: "helvetiker",style: "normal"});
is crashing.
Anyone know of function that can break text at word boundaries to fit into rectangle
Following is code for rectangle and text
window.onload = function () {
var outsideRectX1=30, outsideRectY1=30,outsideRectX2=220, outsideRectY2=480, outsideRectR=10;
var group = paper.set();
var rect1=paper.rect(outsideRectX1+40, outsideRectY1+70, 80, 40,10);
var text3=paper.text(outsideRectX1+75, outsideRectY1+85,"Test code for wrap text").attr({fill: '#000000', 'font-family':'calibri', 'font-size':'14px'});
group.push(rect1);
group.push(text3);
};
When text is greater than rectangle width it automatically wrap so that it always display into rectangle boundaries.
I'm not sure whether there is any direct way to wrap the text according to the size of the rectangle. May be you can specify line breaks or a "\n". Or you can try to resize the rectangle as and when the text length increases.
Here is a sample code where the rectangle resize as the text length increases.
var recttext = paper.set();
el = paper.rect(0, 0, 300, 200);
text = paper.text(0,10, "Hi... This is a test to check whether the rectangle dynamically changes its size.").attr({"text-anchor":"start",fill:'#ff0000',"font-size": 14});
text1=paper.text(0,30,"hi").attr({"text-anchor":"start",fill: '#ff0000',"font-size": 14});
//el.setSize(495,200);
recttext.push(el);
recttext.push(text);
recttext.push(text1);
alert(recttext.getBBox().width);
alert(recttext.getBBox().height);
var att = {width:recttext.getBBox().width,height:recttext.getBBox().height};
el.attr(att);
recttext.translate(700,400);
I know it's a little belated now, but you might be interested in my [Raphael-paragraph][1] project.
It's a small library that allows you to create auto-wrapped multiline text with maximum width and height constraints, line height and text style configuration. It's still quite beta-ish and requires a lot of optimization, but it should work for your purposes.
Usage examples and documentation are provided on the GitHub page.
Please see the code below. I am trying to draw a circle around a path (an icon made by Raphael.js founder, Dimitry) and then fill the circle with a color. This, however, paints on the top of the path. If I could first draw the filled circle and then draw the path, this would be solved. But I need to reference the path because I need to find its center, in order to draw the circle. Can anyone please suggest how to do this? My code is below.
Thanks.
<script>
var myVar = {
s: 1,
pw: 850,
ph: 450
}
</script>
<script>
var paper = new Raphael('figSellerBuyer', myVar.pw * myVar.s, myVar.ph * myVar.s);
var market = paper.path(paths.marketBoundary);
market.attr({fill: "rgb(75,245,75)", stroke: "None"});
var humanIcon = paper.path("M21.021,16.349c-0.611-1.104-1.359-1.998-2.109-2.623c-0.875,0.641-1.941,1.031-3.103,1.031c-1.164,0-2.231-0.391-3.105-1.031c-0.75,0.625-1.498,1.519-2.111,2.623c-1.422,2.563-1.578,5.192-0.35,5.874c0.55,0.307,1.127,0.078,1.723-0.496c-0.105,0.582-0.166,1.213-0.166,1.873c0,2.932,1.139,5.307,2.543,5.307c0.846,0,1.265-0.865,1.466-2.189c0.201,1.324,0.62,2.189,1.463,2.189c1.406,0,2.545-2.375,2.545-5.307c0-0.66-0.061-1.291-0.168-1.873c0.598,0.574,1.174,0.803,1.725,0.496C22.602,21.541,22.443,18.912,21.021,16.349zM15.808,13.757c2.362,0,4.278-1.916,4.278-4.279s-1.916-4.279-4.278-4.279c-2.363,0-4.28,1.916-4.28,4.279S13.445,13.757,15.808,13.757z")
humanIcon.attr({fill: "rgb(75,75,75)"}).scale(2.5,2.5);
humanIcon.translate(40,40);
var bbox = humanIcon.getBBox();
var xcenter = Math.round(bbox.x + bbox.width/2.0);
var ycenter = Math.round(bbox.y + bbox.height/2.0);
var circle = paper.circle(xcenter, ycenter, 40);
circle.attr({fill:"white"});
</script>
After doing a lot of search on Google, I found the answer here on Stackoverflow. At the time, I did not save the link to the answer and I don't remember it. If anyone does find it, please edit this answer and post it. However, I did record the solution and here it is:
One can use the insertBefore() and insertAfter() functions in Raphael. In the example code given in the question, one can do this by changing the last line to:
circle.attr({fill:"white"}).insertBefore(humanIcon);
Thanks to those who responded.
Try changing the order in which the two are drawn. That or look over the Raphael docs to see if there is a "Z-index" attribute that can be used to permanently modify the position of the path on the stack of render-able layers.
Edit: I didn't read your explanation well enough. If you could declare your object without drawing it perhaps you could grab the BBox, and then draw it later.
Edit, Edit: SVG has a "defs" tag to create objects without drawing them, so it stands to reason that Raphael can handle it too.
Try using Raphael's Element.toBack() and Element.toFront().
In your case, it sounds like you want to draw the path, then draw the circle, then call either circle.toBack() or path.toFront().