I have spent hours reading and trying solutions to other people's wrapping problems and nothing is working.
I am using Crafty to build a game and want to display one line of instructions but no matter how I style the text it keeps wrapping at every space. If I take the spaces out, the whole sentence displays on one line. With spaces, each word is on its own line. I have tried float & white-space, align: justify, changing the coordinates, changing the font size, you name it. I am working in the JavaScript, not HTML. TIA
Here is what I have:
var helloWorldText = Crafty.e('2D, DOM, Text')
.attr({
x: 350,
y: 10
});
helloWorldText.text("Click on the matching character.");
helloWorldText.float(left);
helloWorldText.whiteSpace(nowrap);
helloWorldText.textColor('black');
helloWorldText.textFont({
size: '14px',
textAlign: justify
});
Setting a width (w) should allow your text to not wrap.
For example:
var helloWorldText = Crafty.e('2D, DOM, Text')
.attr({
x: 10,
y: 10,
w: 400
});
helloWorldText.text("Click on the matching character.");
helloWorldText.float(left);
helloWorldText.textColor('black');
helloWorldText.textFont({
size: '14px'
});
The "w" attribute comes from the CraftyJS 2D Component
Related
I am trying to create a graph with plot bands in Highcharts, where I want to insert an icon into the plot band.
It all works well except that I cannot get the icon to show below the actual series line. I set the zIndex of the icon to 1 and series to 2, but it seems to not do anything.
I looked at the documentation here:
http://api.highcharts.com/highcharts/xAxis.plotBands.zIndex
But it should work based on that, but it does not, it works when I use text for the label, but not an image and the object has no specific class or ID so that I could target it with jquery and set the css manually.
To illustrate my point I made a fiddle:
http://jsfiddle.net/qwfj4x3j/
I used for example
{
color: null,
zIndex: -1,
from: 3.5,
to: 4.5,
label: {
text: "<img src='http://simpleicon.com/wp-content/uploads/rain.png' style='width:100px;z-index:-1'>",
verticalAlign: 'top',
useHTML: true,
y: 25
}
},
As you can see, I set the zIndex of both the plot band and the actual image, and a higher zIndex for the series, but it does not work.
OK, so in the end I found a very elegant solution :)
I gave all the images a class and then after the graph is rendered, I call jquery command that targets all parent elements of this class, the span I originally needed to target, but could not because it had no class or id. Now I can call all these as parents of my image with particular class, asign them z-index of -1 and it works :)
If you render an image in that way HTML <img> will be rendered at the top of the svg - this is why the image covers svg elements.
Instead, you can use chart.renderer.image() method combined with axis.toPixels() methods to get x, y attributes in pixels.
var img;
function renderImage() {
var chart = this;
img = chart.renderer.image(
'http://simpleicon.com/wp-content/uploads/rain.png',
chart.xAxis[0].toPixels(0),
chart.yAxis[0].toPixels(10),
150,
150
)
.add();
}
function redrawImage() {
img.attr({
x: this.xAxis[0].toPixels(0),
y: this.yAxis[0].toPixels(10)
});
}
Example: http://jsfiddle.net/qwfj4x3j/2/
To have the image responsive like plot lines you need to adjust x, y attributes on redraw event.
I need to make the "%" (percentage) symbol smaller then the number for data series labels. Right now they are the same size. See my sample code at this jsfiddle.
Currently I have this text rendering code, but it renders all text at 62%; I need to single out the "%" and make it smaller.
// Render the text
chart4.renderer.text(chart4.series[0].data[0].percentage + '%', 44, 85).css({
width: circleradius * 2,
color: '#515151',
fontSize: '32px',
textAlign: 'right',
fontFamily: 'Arial',
fontWeight: 'bold'
})
From their docs:
HTML IN HIGHCHARTS
Texts and labels in Highcharts are given in HTML, but as the HTML is parsed and rendered in SVG, only a subset is supported. The following tags are supported: <b>, <strong>, <i>, <em>, <br/>, <span>. Spans can be styled with a style attribute, but only text-related CSS that is shared with SVG is handled.
So, you can use a <span> tag inside the text. e.g.
chart4.renderer.text(
chart4.series[0].data[0].percentage +
'<span style="font-size: 22px">%</span>', 44, 115).css({
and it converts any supported style attributes into the appropriate svg code.
The HTML code ﹪ will give you a smaller percentage sign: ﹪. It's also unicode FE6A, if you need to use a character conversion method.
I wish to have a line going across my canvas element in a similar fashion to the one I have managed to produce below after I had read up a little about the tween function:
http://jsfiddle.net/MjLdT/17/
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Line({
x: 100,
y: 100,
points: [0, 0, 0, 0],
stroke: '#000000'
});
layer.add(line);
stage.add(layer);
var tween = new Kinetic.Tween({
node: line,
duration: 3,
x: 800,
y: 100,
points: [-700, 0, 800, 0]
});
setTimeout(function () {
tween.play();
}, 2000);
Eventually I wish to have users be able to manipulate the line by clicking the left mouse button and the line goes up and to the right diagonally, right clicking and the line goes down diagonally (horizontal speed towards the right of the screen remains the same). Letting go of the mouse button will result in it returning to it's normal horizontal motion at whatever 'height' it is on the screen at that time.
This is one of my first attempts at using JavaScript and was wondering if the method I have chosen is appropriate for what I wish to achieve.
Also, any tips on how to get started on the mouse effects would be much appreciated.
The method is appropriate and it works, you should look into Kinetic.Animation which may give you slightly cleaner code. With an animation you can put more logic into the code that is being re-run. I believe tweens may be limited for what you are trying to do, it is possible but Animations are probably what you are looking for if you are aiming for a good design.
I would read through this documentation.
http://kineticjs.com/docs/Kinetic.Animation.html
I am with a little problem here but I don't know if it is a bug or a new feature since in the KineticJS change logs there is the following change:
"drag and drop operations now automatically dynamically create a temporary top layer, and place nodes there for groups and shapes to greatly improve drag and drop performance..."
I was used to use the version 4.0.0 in my test projects and I must use explicity moveToTop() when I want to move some shape to the top (I think that this is the correct way). Now (version 4.3.2) if I just click over some pic, it is automatically moved to the top against my wish. This temporary layer should be something internal, nothing visual. So is this really a bug or there is someway to turn this thing off.
Even the labs changed I think, before I think that the objects keeps the space order if you don't call the moveUp, moveToTop, etc, functions. For example in the following link there are no moveToTop() function calls, even this way if you click on the shapes, they are moved to the top.
http://www.html5canvastutorials.com/kineticjs/html5-canvas-move-shape-to-another-container-with-kineticjs/
Thanks for the attention
While I dont think you can completely disable the layer, you can turn off moving the shapes into it. Say you have some shape like:
var shape1 = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 100,
fill: 'blue',
draggable: true
});
you need to add one parameter to this to disable moving your shape to the temporary layer on drag: 'dragOnTop' which needs to be false, so make your shapes something like:
var shape1 = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 100,
fill: 'blue',
draggable: true,
dragOnTop: false //<-- add this line so that this shape doesn't use the drag layer.
});
Alright, I'm at my wits end and I can't get CraftyJS to do a tween.
So what I wanna do is, everytime a Mushroom gets hit, I want to check if that mushroom has the component "Answer". If it exists, I will do nothing. Otherwise, I wanna display a big red box that fades away.
Crafty.c("Mushroom", {
init: function() {
this.addComponent("collision");
this.collision();
this.onhit("bullet",function(e) {
this.destroy();
e[0].obj.destroy();
if(!this.has("Answer")) {
Crafty.e("2D, Tween, color, canvas")
.attr({alpha: 1.0, x: 170, y: 100, w:300, h:100})
.color("red")
.bind("enterframe", function() { //How do i actually get the box to fade?
this.tween({alpha: 0.5, x: 170, y: 100}, 30);
});
}
});
}
You are binding the tween code execution to the EnterFrame event, which will cause the tween to start with each frame. Instead, you want to simply call the tween function on the entity you created, like so
Crafty.e("2D, Tween, color, canvas")
.attr({alpha: 1.0, x: 170, y: 100, w:300, h:100})
.color("red")
.tween({alpha: 0.5, x: 170, y: 100}, 600);
And the tween function will manage its own EnterFrame over the next 600 ms (30 frames), after which it will fire the TweenEnd event.
(In old versions of Crafty, you specified the duration in frames instead of ms.)
This is more like a meta answer :-)
First, i would encourage you to upgrade to the latest version as it has a lot of bugfixes. Some of the changes you will have to do to get your code to run under the new release is to change all components and events to Pascal casing. That is enterframe => EnterFrame, canvas => Canvas etc.
Second, i think you should bring these questions to the Crafty forum to get the right audience. The only way i discovered this question was through a google alert.
The best way to get help is to create a jsfiddle from this template http://jsfiddle.net/mCdUX/62/ with a small running example demonstrating the part that you can not get to work.
Oh, and welcome to the Crafty community :-)