Hello everyone I am trying write the score in the top left corner of the window but for some reason it is not working. Here is the code I used to spawn the text:
commands
.spawn(TextBundle{
text: Text{value: "Score:".to_string(),
font: assets.load("FiraSans-Bold.ttf"),
style:TextStyle{
font_size:30.0,
color:Color::WHITE,
..Default::default()},..Default::default()},
transform: Transform::from_translation(Vec3::new(-380.0,-380.0,2.0)),
..Default::default()
})
.with(TextTag);
Window is 800 by 800. Any help is appreciated.
You may need to add the CameraUiBundle if you did not yet do it.
commands
.spawn(CameraUiBundle::default())
.spawn(TextBundle{
...
})
.with(TextTag);
You might want to do that in your initial setup system in which you also add the camera.
The Bevy version used when answering was 0.4.
Another reason (in bevy 0.8) might be that there's no default font in bevy (check out this answer)
What you'd need to do would be to download a .ttf file, and then load it when spawning the text.
TextStyle {
font_size: 50.0,
color: Color::WHITE,
font: asset_server.load("your_font.ttf"),
},
Related
I trying to drag and drop items while I am testing a frontend with Cypress.
I already installed the plugin Cypress-drag-drop from:
https://www.npmjs.com/package/#4tw/cypress-drag-drop
This actually works good, but only for the first time.
When I try to drag and drop a similar selector for the second time it is failing.
I have tried to find the source of this problem but couldn't find it.
Just using the following:
cy.get('[data-test-id="gapMatchFact"]:eq(1)').drag('[data-test-id="gapMatchGap"]:eq(0)') //<-- works perfectly
cy.get('[data-test-id="gapMatchGap"]:eq(0)').drag('[data-test-id="gapMatchFact"]:eq(1)') //<-- doesn't work
Please check the printscreens, I can see that the second try has a lot more tries for moving the object. What could be the reason for this? The FrontEnd is native javascript.
I already tried different drag and drop methods. This even did not work for the first drag and drop.
`cy.get('[data-test-id="gapMatchFact"]').eq(1)
.realMouseDown({ button: 'left', position: 'center' })
.realMouseMove(0, 10, { position: 'center' });
cy.get('[data-test-id="gapMatchFact"]').eq(0)
.realMouseMove(0, 0, { position: 'top' })
.realHover().realMouseUp();`
Im currently looking into fabric.js as well as konva.js and fabric.js seems to have the advantage not to have to implement all selection tools manually; However while in konva.js it is quite obvious how to extract an image "projection" of a layer (as each layer there has at least one canvas on its own), I dont know if difficult it is to convert a group in fabric.js into an image (not svg!). Basically I need some output object which I can convert into a bitmap of certain size for further processing steps.
Thank you for any help :)!
So each object in fabric, including the Groups of object comes with a toDataUrl method.
In this basic basic example i create a fabricJS circle, i do not add it to a canvas, i just exec its own dataURL method.
Before i add a scale factor just to make it bigger.
var circle = new fabric.Circle({radius: 50, fill: 'blue', stroke: 'red'});
circle.scaleX = 20;
circle.scaleY = 20;
document.getElementById('i').src = circle.toDataURL();
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<img id="i" />
You can use fabric's built-in cloneAsImage function:
group.cloneAsImage(image => {
image.set({...do settings});
canvas.add(image);
});
see more here: http://fabricjs.com/docs/fabric.Group.html#cloneAsImage
I tried to rewrite text with the backgroud color, but the edge (outline) of the old text remains on the screen. I have no idea why. Can you please help me?
background(-1);
noLoop();
fill(#500F0F);
text("99", 300, 200);
fill(-1);
text("99",300, 200);
Outcome:
In the future, please try to post a MCVE. The code in your post draws the text completely off the screen, which makes me wonder what else is different in your real code. Are you using a draw() function? Please avoid these uncertainties by posting a MCVE.
Anyway, your basic problem is caused by anti-aliasing. By default, Processing uses anti-aliasing to make drawings appear more smooth and less pixelated. You can see this if you zoom in to a drawing and notice the edges are a bit blurry. This is a good thing for most drawings, but in your case it's causing the blurry edges to show through.
So, to fix that problem, you could disable anti-aliasing by calling the noSmooth() function:
size(500, 500);
noSmooth();
background(255);
noLoop();
fill(#500F0F);
text("99", 300, 200);
fill(255);
text("99",300, 200);
Also notice that I'm using 255 as a paramter instead of -1. I'm not sure what a color parameter of -1 is supposed to do, so I'd keep it between 0 and 255 just to be safe.
But it's a little fishy that you need to "delete" any text in the first place. Like George's comment says, why don't you just call the background() function to clear out old frames?
Here's a small example:
void draw() {
background(64);
if (mousePressed) {
text("hello", 20, 40);
}
}
Can I change the screen resolution in nightmarejs? (Not a viewportSize)
For example, how it works in Casperjs:
var casper = require("casper").create({
onPageInitialized: function (page) {
page.evaluate(function () {
window.screen = {
width: 1920,
height: 1080
};
});
}
});
Many thanks!
(This answer is pulled from my original answer in Nightmare #699.)
I'm not certain, but I don't think so, at least not directly. Electron's screen resolution depends on the framebuffer it's rendering to. You could use something like xvfb-run to alter the framebuffer (#224 touches on this, although for an entirely different reason).
Without more information, it's tough to answer your question. If you provide more information about what you're trying to accomplish, I'll update this answer.
Nightmare is based on electron. Refer similar question and my answer here
I need help with fabricjs, objects are not rendering properly while I clone and shrink to another canvas.
If I do only with text object there is not problem kindly look the below fiddle (after save)
enter code hereFIDDLE
If I load an image then the objects not aligning properly.
enter code hereFIDDLE
Kindly help to resolve form this.
Thank You.
Your problem for the image not respecting the zoom is that the image loads asyncronously. So you load from json, you do the zoom logic, some microseconds later the image finish loading and sets its own width and height.
Other than this you have to use zoom the right way.
Everyone is scaling manually and changing left and top using division or multiply with scale factor.
The good way is using
canvas.setZoom(scale);
This will save a lot of headaches to you.
$(function () {
scale = 0.5;
canvas1 = new fabric.Canvas('c1');
canvas1.setDimensions({
"width": canvas.getWidth() * scale,
"height": canvas.getHeight() * scale
})
var json = localStorage.getItem('save');
canvas1.loadFromJSON(json, function () {
canvas1.renderAll();
});
canvas1.setZoom(scale);
canvas1.renderAll();
});
chek updated fiddle
https://jsfiddle.net/asturur/Lep9w01L/11/