I am new to Cocos 2d js.....
I want to know how can I draw a rectangle having a border to it using cocos2d js??..
I tried to google but didn't find any sample code or something similar..
which is quite simple to do using HTML and CSS...
Thanks.
Yo need to add a draw node to your scene/layer and draw a rectangle on it. For example, say you have the following method within your layer:
{
...
var dn = new cc.DrawNode();
this.addChild(dn);
dn.drawRect(cc.p(50,50), cc.p(200,300), cc.color(255,0,0,255), 3, cc.color(0,255,0,255));
...
}
The function call parameters are: drawRect(origin, destination, fillColor, lineWidth, lineColor).
This is from the samples found in the samples/js-tests folder that should be in your cocos2d-js folder. For more information, check out the API on the drawing nodes here: http://www.cocos2d-x.org/reference/html5-js/V3.3/symbols/cc.DrawNode.html
PS: if you want to draw a filled circle with a line color, however, note that there's not a function for that currently. There are a few workarounds, the best one I've found is to use a drawDot for the "inner solid part" of the circle, and a drawCircle for the outer part.
Related
i really want to know how to create a multiple circle shapes in SFML.
I know we can create the circle shape with sf::CircleShape
I want to create a circle shape with the same radius everytime i click on my screen and i have no idea how to do that, please help me.
You need to use an event loop to capture mouse events and any other event for that matter. See https://www.sfml-dev.org/tutorials/2.0/window-events.php for details.
Read the documentation or search via Google for more.
I am working on a project in C++ with Qt, and I am trying to find a way to apply a text shadow when drawing text on a QPixmap using QPainter.
I understand that QGraphicsDropShadowEffect is a thing, and I am using in other parts of my project, but I can't for the life of me find a way to apply a QGraphicsEffect when drawing with QPainter on a pixmap. Drawing the same text multiple times with different offsets and opacities doesn't quite cut it.
Are there any ways to do this?
If not, how could I go about making a function that does it, given a QGraphicsEffect to get the radius and color from?
Thanks in advance!
I don't think it is directly possible to "draw text with shadow", it is only possible to apply a shadow to something already drawn that would take in an element and use say its alpha channel to calculate the shadow.
You should use composition, either of the final products or during drawing. It should work if you use it on a text element. The other option would be to draw your text in black, apply Gaussian blur and then again draw the text on top of it with the desired offset.
Thanks for your answer ddriver, it made me search with some new keywords, which lead me to find a suiting solution for my project.
What I figured out is that you can simply create a QLabel with the text and effects you want (QGraphicsDropShadowEffect, in my case), and render it into a QPixmap using QWidget::grab(). You can then draw this new pixmap with QPainter as you would any other image, by converting your pixmap to a QImage and using QPainter's drawImage().
I'm currently trying to draw the top view of a boat by using Qt 4.8 (C++).
I want to implement a QWidget in which a boat moves around.
Therefore I need to draw the top view of a boat, it should look similiar to this (only need the outer boarders):
(source: 4vector.com)
Currently I'm experimenting with QPainter in combination with QPainterPath but I can't figure out how to combine the ellipsoids and rectangles correctly. Another option would be to draw it as an polygon but I would need a lot of points to let it look good.
Besides I think a solution by using only a rectangle and two ellipsoids or simliar solutions would be more beautiful.
Many thanks in advance for your help!
I have this embedded Qt application that uses the QGraphics framework to display a web view.
The dimensions of the web view are 1280*720 pixels, and the QGraphicsView is set to render the scene at these coordinates (0,0, 1280x720).
I'm trying to add a loading indicator on the top right corner (at 1100,50), which is a simple PNG image that I rotate every now and then using a QTimeLine.
Code looks like this (I found the transformation trick on the internet):
// loading_indic initialization:
QGraphicsPixmapItem *loading_indic =
new QGraphicsPixmapItem( QPixmap("./resources/loading_64.png") );
loading_indic->setPos(QPoint(1100.0,50.0));
QTimeLine timeline = new QTimeLine(1000);
timeline->setFrameRange(0,steps);
connect(timeline, SIGNAL(valueChanged(qreal)), this, SLOT(updateStep(qreal)));
timeline->start();
// called at each step of a QTimeLine:
void updateStep(qreal step) {
QTransform transformation = QTransform()
// place coordinate system to the center of the image
.translate( width/2.0, height/2.0)
// rotate the image in this new coordinate system
.rotate(new_angle)
// replace the coordinate system to the original
.translate( -width/2.0, -height/2.0);
loading_indic->setTransform(transformation);
}
Now, my problem is that when doing this, it looks like the WebView is translated as well, resulting in everything being displayed in the center of the screen.
Result looks like this:
The webview is supposed to fill the screen, and the loading indicator should be on top right...
My scene contains only two items:
Scene
|
\____ QGraphicsWebView
\____ QGraphicsPixmapItem // loading indicator
What am I doing wrong here?
Solved my problem..
I don't know why, but it looks like adding this PNG item to the scene was screwing up with the scene's rectangle.
Doing this:
_scene.addItem(loading_indic);
loading_indic->setPos(1100.0, 50.0);
_scene.setSceneRect(0.0,0.0,1280.0,720.0); // resets the scene's rectangle ?!
loading_indic->startAnimation();
solved the problem. Now my items are correctly placed on screen.
If somebody has an explanation to this, I'll gladly accept his answer.
I'm new to Qt development so I've being trying to research a solution to a user interface I need to design. My project is to simulate players in an online game moving around a global map. To represent the map I need to display a 2D grid, with each space in the grid representing a region of a map. I then need to display the location of each player in the game. The back-end is all fully working, with the map implemented as a 2D array. I'm just stuck on how to display the grid.
The research I have done has led me to believe a QGraphicsView is the best way to do this, but I can't seem to find a tutorial relevant to what I need. If anyone has any tips on how to implement this it would be much appreciated.
Thanks, Dan
A 2D Grid is nothing more than a set of horizontal and vertical lines. Suppose you have a 500x500 map and you want to draw a grid where the distance between the lines in both directions is 50. The sample code that follows shows you how you can achieve it.
// create a scene and add it your view
QGraphicsScene* scene = new QGraphicsScene;
ui->view->setScene(scene);
// Add the vertical lines first, paint them red
for (int x=0; x<=500; x+=50)
scene->addLine(x,0,x,500, QPen(Qt::red));
// Now add the horizontal lines, paint them green
for (int y=0; y<=500; y+=50)
scene->addLine(0,y,500,y, QPen(Qt::green));
// Fit the view in the scene's bounding rect
ui->view->fitInView(scene->itemsVBoundingRect());
You should check the QGraphicsView and the QGraphicsScene documentation as well as the corresponding examples. Also you can watch the graphics view training videos or some graphics view related videos from the Qt developer days.
Well if you have a constant grid size or even a limited number of grid sizes what i like to do is to draw a grid block in gimp or any other program and then set that as the background brush (draw only bottom and right side of the block) qt will repeat the image and will give you a full grid. I think this is good for performance too.
This is the grid image i used in one of my programs it's 10x10 pixels.
Then call QGraphicsScene setBackgroundBrush as the follwing:
scene->setBackgroundBrush(QBrush(QPixmap(":/grid/grid10.png")));
The more native way is this:
scene = self.getScene() # Your scene.
brush = QBrush()
brush.setColor(QColor('#999'))
brush.setStyle(Qt.CrossPattern) # Grid pattern.
scene.setBackgroundBrush(brush)
borderColor = Qt.black
fillColor = QColor('#DDD')
rect = QRectF(0.0, 0.0, 1280, 720) # Screen res or whatever.
scene.addRect(rect,borderColor,fillColor) # Rectangle for color.
scene.addRect(rect,borderColor,brush) # Rectangle for grid.
Sorry by PyQt...
Suppose a scene is set to the graphicsview then simply below one line will show the grid.
ui->graphicsView->scene()->setBackgroundBrush(Qt::CrossPattern);
There several other values can be passed for ex: Qt::Dense7Pattern
These are members of enum BrushStyle, just click on any used value in Qt creator and it will take you to the enum declaration where you can see all other possible values.
PS:
A scene can be set like this:
ui->graphicsView->setScene(new QGraphicsScene());