I am wondering how to transform text using KineticJS in order to mirror or reflect Simple Text. I see that the class is documented at this location:
http://kineticjs.com/docs/Kinetic.Transform.html
There is no sample code, or tutorial, on how to actually perform this demonstration. I know that HTML5 Canvas has a tutorial that simply applies a negative scale in the x direction to flip the context horizontally.
I would like to apply "scale(sx, sy)" or scale(-1, 1) here, but using KineticJS-specific code:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/
Any code example on how to mirror "Simple Text" to read "txeT elpmiS" would be greatly appreciated. My question, on Stackoverflow, is not the only question being asked about KineticJS's undocumented functionality, so I am hoping that being more specific in purpose would generate a more helpful response for overall guidance on using the Transform Class.
Don't use Transform class. It is "private".
You can apply negative scale at text as well:
simpleText.scale({
x : -1
});
http://jsbin.com/sevoko/1/edit
Related
I'm trying to output a parallelogram svg by using MathJax,here is my source mathml,please try them on MathJax demo page:
<math><mpadded voffset="-1.5ex"><mo mathsize="300%">▱</mo></mpadded><mi>A</mi><mi>B</mi><mi>C</mi><mi>D</mi></math>
As you see I've set mathsize attribute to make the output result bigger,then I found that parallelogram itself did bigger but it went up too.So I set voffset to make it lower.The result is,lots of space above parallelogram.
I want to remove the space,how should I do?
ps:One way to solve this problem is modifying the transform attribute in the svg after MathJax rendering,which I don't want to apply.I'm prefer to modify the mathml to solve it.Can you provides me some help?Thx a lot!
I'm learning new javascript lib PhysicsJS (link).
If anybody can help me or show me example of:
How to rotate fixed object (like propeller and balls bounce of it)?
How to set in world some object that bounce with object that not bounce?
Edge-collision-detection (AABB) , Is it possible to do a circle instead of the cube?
You can rotate objects by changing angular property
like this:
world.on('step', function(){
barrel.state.angular.pos += 0.02;
world.render();
});
Your question about rotating a "fixed" object was asked in another post: PhysicsJS - how to create a body which rotates about a fixed point when struck?
As for setting some objects that bounce and some that don't: This can't be done yet. It's being worked out as part of future development: https://github.com/wellcaffeinated/PhysicsJS/issues/30
For edge collision detection, right now it's only possible to use rectangles. You would have to modify the edge collision detection code to make it a circle.
I have created a vector graphic using Raphael JS - specifically a circle.
I would now like to use this circle as the letter "O" in a title. It is also a circle that will animate upon click. I would like to know if this is at all possible.
Here is a fiddle to explain better what I'm trying to say.
The html is very simple:
<h2>N<span id="canvas_cont"></span>OTRE APPROCHE :</h2>
Here is the jsfiddle
Basically the circle will act as the second letter in "Notre", and when clicked will move to the right of the screen. Other things will happen after, but this effect is what I'm trying to get....
Placing the Raphael canvas in a span is clever, but at the end of the day I suspect you'll regret mixing native HTML with Raphael in this way. Doing so would probably require a lot of absolute positioning and z-indexes that are better handled and supported in Raphael.
I recommend you simple draw the text in Raphael:
var text = r.set();
text.push(
r.text(10,20,"N"),
r.text(70,20,"TRE APPROCHE :")
);
text.attr({
'text-anchor': 'start',
'font-size':'36px'
});
If the SVG/VML styling is inadequate, you could also just use an image. Again, I would recommend placing that image on the canvas using Raphael (paper.image());
Note that, in the updated fiddle, I made the canvas a div the width of the logo.
Updated fiddle.
I'm hoping to use arbor.js as a way of creating annotated illustrations.
The plan:
Fixed size canvas
Draw image to canvas – as an example i've used the silhouette of head.
Then have a mixture of fixed and floating nodes.
var data = {
nodes:{
brain-position:{},
brain-text:{'color':'green','shape':'dot','label':'brain'},
mouth-position:{},
mouth-text{'color':'green','shape':'dot','label':'mouth'},
},
edges:{
brain-position:{ brain-text },
mouth-position:{mouth-text}
}
};
sys.graft(data);
The problems i'm having is that when I try to create a statically positioned nodeBox eg.
nodeBoxes[node.name] = [50,50, w,w] it breaks the link to other linked nodes.
I'm tinkering with halfvis/src/renderer.js file from the downloaded arbor file.
Many thanks
EDIT
Below is an additional image that hopefully visualises the functionality I'm attempting. Probably should have done this first :)
nodeBoxes, in the halfvis example, is an array used to work out where to start drawing edges so the arrows don't overlap with the boxes - is that what you're using it for?
Are you trying to find a way of forcing the 'brain-position' node inside an area?
Please provide a bit more detail of what you're planning and we can probably do this.
I am trying to build a roulette wheel in javascript.
I found this example: http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas but I find the look & feel not very terrible.
Since my roulette will have a limited number of option, I was thinking of using an image and then place text above with the proper angle. When spinning the wheel, I would just make the image and the text turn.
Is it a good approach? Are there some better approaches?
You can also do that with css3 rotation but it will work only on newer browsers
You can do even better. Make hole roulette wheel in SVG, it support animation and it can be programmed in javascript
Well I think the best approach in terms of creating something quickly and easily is to use an existing Javascript library for creating spinning prize/winning wheels.
I am the creator of a Javascript library called Winwheel.js which is specifically for this purpose. See http://www.dougtesting.net
One great feature about my Winwheel.js is that you can mix a graphically rich image for the face of the wheel with code-drawn text for the segment labels, so if you want the wheel to look really nice but have the flexibility of configurable text, you can.
Here is an example of the code needed to do this using Winwheel.js...
var myWheel = new Winwheel({
'drawMode' : 'image',
'drawText' : true, // Set this to true for text to be rendered on image.
'numSegments' : 4,
'textOrientation' : 'curved', // Set text properties.
'textAlignment' : 'outer',
'textMargin' : 5,
'textFontFamily' : 'courier',
'segments' : // Set segment text
[
{'text' : 'Television'},
{'text' : 'Mobile Phone'},
{'text' : 'Old Radio'},
{'text' : 'Computer'}
]
});
var wheelImg = new Image();
wheelImg.onload = function()
{
myWheel.wheelImage = wheelImg;
myWheel.draw();
}
wheelImg.src = "wheel_image.png";
There is a full set of tutorials on my site explaining how to use Winwheel.js, but the particular one about Image wheels can be found here http://dougtesting.net/winwheel/docs/tut9_creating_with_an_image
Thanks,
DouG
jQuery is not necessary. The example was done using the HTML5 Canvas element, which is probably the only (clean) way you could do it without Flash or Silverlight. You can customize the colors using the first array in the code, or any other nuance of it with a little tinkering.
You could use an SVG (Scalable vector graphics format) image and rotate it.
I wrote http://roulette.dabase.com/ as an exercise which works on mobile browsers I've tried.
I actually implemented a similar mini-game on my site not too long ago. No canvas, no SVG, no jQuery.
I used a simple image for the board (more specifically as a background-image), then placed a <div> on it to be the ball.
<div id="board"><div></div></div>
CSS:
#board {
width:256px;
height:256px;
background-image:url('gameboard.png');
position:relative;
transform-origin:50% 50%;
}
#board>div {
position:absolute;
margin-left:-7px;
margin-top:-7px;
border:7px outset #ccc;
width:1px; height:1px;
left:248px;
top:128px;
}
Then this JavaScript is used to position the ball when spinning:
function placeBall(angle) {
var board = document.getElementById("board"), ball = board.children[0];
ball.style.left = (128+Math.cos(angle)*120)+"px";
ball.style.top = (128-Math.sin(angle)*120)+"px";
board.style.transform = "rotate(-"+angle+"rad)";
}
This will result in the ball spinning around the wheel in older browsers. In newer browsers, the ball will stay in place (but the border shading will spin) while the entire board rotates. You can of course use a combination of the two if you do something different on the transformation (for example, "rotate(-"+(angle/2)+"rad)")