I only want to show a portion of a shape drawn on a canvas.
My line is essentially this, and it works fine:
ctx.fillRect( xPosition, rectHeight - offsetV , rectWidth, rectHeight);
The second variable there is going to be negative. So, my quesiton is: is it bad practice (or am I setting myself for errors down the road) to draw a path that starts off the canvas (with a negative coordinate) and then continue drawing on to the canvas.
No problem at all. If you have very large number of drawing object you can (like GameAlchemist said) prevent drawing that object .If you use canvas like map for explore (zoom out/in ctx, translate whole context) that preventing draw can cost more that clip cost. And its complicated ...
I have some expire with drawing object out of canvas. You can have a problem if you put calculation and other (no drawing) staff intro draw function.
Important :
-Make canvas draw function code clear(only draw canvas code).
-If your app no need for const update make update call only when it needs.
-Clear canvas only in (0,0,canvas.w,canvas.h)
-Use style only when it needs (stroke,fill,font etc.)
Related
I have a webgl canvas. It is being continuously updated (simulation).
Now I want to freeze the current content of the canvas. I am continuously getting updates for the simulation which I need to keep feeding to the visualizer. So my idea of achieving this is to clone the exact state of the current webgl canvas on to a new one, and hide the current one, which continues to get updated. Then I can remove the frozen one and the live simulation is being shown again.
I haven't been able to achieve this, and examples I've found on the web like this one:Any way to clone HTML5 canvas element with its content?
only apply to 2D canvases.
Google search didn't help much either.
This one:
how to copy another canvas data on the canvas with getContex('webgl')?
seemed promising but I haven't been able to figure out how to apply it.
Cloning the canvas appear to me to be an heavy and weird solution.
The simplest way to achieve what you want to do is to prevent the frame buffer to be presented (swapped, then cleared) to HTML canvas. Do do so, you simply have to avoid calling any gl.clear, gl.drawArrays or gl.drawElements during your loop.
For example suppose you have two functions, one running your simulation, the other your GL draw:
function simulate() {
// update simulation here
}
function draw() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
// do drawing stuff here
gl.drawArrays(gl.TRIANGLES, 0, 12345);
// etc...
}
From this point, if you want to "freeze" the canvas content, you simply have to stop calling the "draw" function within your global loop. For example:
function loop() {
simulate();
if(!freeze) draw();
requestAnimationFrame(loop);
}
You may uses other methods to achieve the same effect. For example, you can draw your scene to a texture, then draw the texture on the canvas. By this way, you also can control when the texture is cleared and drawn again, while it still rendered in the canvas.
However, to implements the render-to-texture method, you will have some more heavy modification to done in your code: you'll need an additionnal shader to draw the texture on screen, and take some time to play with frameBuffer and renderBuffer objects.
Like everyone else, I'm having trouble following how libgdx's coordinate transformations. I'm creating a scrabble-like game, and dragging a finger on the screen pans the camera. The tiles are Actors on a Stage, and I'm doing the camera transformations on the stage's camera. That all works. Now I'm trying to give it a fancy background for the tiles to sit on. I can't quite figure out the draw method to make it work.
//Assets class
static final Texture feltBackground = new Texture(
Gdx.files.internal("felt_background.png"));
feltBackground.setWrap(Texture.TextureWrap.Repeat,
Texture.TextureWrap.Repeat);
//board rendering snippet
private void drawBackground() {
batch.setProjectionMatrix(board.getCamera().combined);
batch.begin();
screenUpperLeft.set(0, 0, 0);
screenLowerRight.set(Gdx.graphics.getWidth(),
Gdx.graphics.getHeight(), 0);
board.getCamera().unproject(screenUpperLeft);
board.getCamera().unproject(screenLowerRight);
batch.draw(Assets.feltBackground,
0, 0,
(int)screenUpperLeft.x, (int)screenUpperLeft.y,
(int)screenLowerRight.x, (int)screenLowerRight.y);
batch.end();
}
What I'm attempting in drawBackground is:
set boundary points to screen bounds
unproject those points into world space to find the region of the texture I should draw
draw that region to the screen origin
However, with the code like this I'm having various weird problems like the lower boundary of the background region starting offscreen, the upper boundary moving when the camera is zoomed, the texture panning faster than my finger's movement (although the boundaries of the background region pan correctly), the y axis pans mirrored, etc. Changing the code changes these symptoms, but I haven't found a pattern to try to get closer to being correct. Any words of wisdom for drawing like this?
Edit:
Here are some screenshots to add clarity.
When I open the game, there is no background.
I can drag up, which moves up the upper boundary of the background (if there is a lower boundary, I can't ever find it)
I can drag the left boundary right, but like the bottom I can't ever find a right boundary (if it exists)
Whenever you see weird synchronization issues between your camera and the stuff you're trying to draw, it's generally a symptom of confusing world coordinates with viewpoint coordinates (or vise versa) somewhere in your code.
You're using a SpriteBatch to do the rendering, right? When I look up the API for the version of SpriteBatch#draw() which you are calling, it says that those first two floats are the position that you're rendering the sprite in the world, and the four integers have to do with the source and height of the source image.
When you pass (0,0) as the position, it is drawing the image at 0,0 in your game world, which is not (0,0) on your viewport.
I would recommend a simpler approach- instead of trying to project or unproject the coordinates, set the draw location (those first two floats) to stage.getCamera().position.x and stage.getCamera().position.y.
I am working on a 2D AS3 project, where the different layers are rendered via Stage3D, in a single drawTriangles() call, as a single mesh.
(if you are familiar with the BunnyMark GPUSprite mini render engine, that will give you an idea: http://www.bytearray.org/?p=4074)
What I would like is to draw one of these entire 'render layers', with an overall alpha transparency value, that would apply to ALL triangles drawn, adding to their own alpha values.
IE I am not looking to change the alpha by using textures with alpha transparency or via having to go through setting each triangle separately to have the same alpha: I want a master switch that would affect the alpha value of everything that is drawn? ( something computationally cheap)
Is this possible? Perhaps via a Shader, or a setProgramConstantsFromVector command?
Well you could render your layer to a texture, then you could put this texture on the stage with the alpha you want, this way your whole layer would have the same alpha!
You can do this in two ways, the first way is to render it to a texture, and display that texture with Stage3D and create a shader that adjusts the alpha.
The second way is rendering it to a bitmapData, and displaying it on the normal stage. I'll give an example for this way:
var bmd:BitmapData = new BitmapData(renderWidth, renderHeight, true, 0);
var bit:Bitmap = new Bitmap(bmd);
bit.alpha = 0.5;
addChild(bit);
//In your render loop at the beginning
context3D.renderToBitmapData(bmd);
I need to know where the Sprite.graphics start to do some stuff. When I add the sprite to my MovieClip, (x,y) coordinates are (0,0) but I need to know coordinates from Sprite.graphics, not Sprite. There are some images so clarify what I want:
I have this board where user can draw some forms (lines, arrows, polygons, etc.) When the user draw a line, I interpret that Sprite is created (with Sprite.graphics inside it, the real form).
How can I catch the point where Sprite.graphics is created? Actually I can't because Sprite.graphics is read-only.
Thanks!
EDIT: some source code
line = new Sprite();
line.graphics.moveTo(posX,posY);
line.graphics.lineStyle(10);
line.graphics.lineTo(endposX,endposY);
Global.board.addChild(line);
To get the bounds of visual part, you can try:
var bounds: Rectangle = line.getBounds(line);
There is also a getRect() method, but that leaves out space taken by strokes.
You cannot access the graphics data like that. Your best chance would be to save the coordinates posX and posY yourself when the line is being drawn.
To clarify things, what i am trying to do is to get the openGL coordinates and manipulate them in my mfc code. not to get an openGL object. i'm using the mfc to control the position of the objects in the openGL.
Hi, i'm trying to find the naswer on the web and can't find a full solution that i can use and that will work...
I'm developing a MFC project with static picture as the canvas for an openGL class that draw the grphics for my game.
On moush down, i need to retrive a shape coordinate from the openGL class.
I'm looking for a way to convert the openGL coordinates to MFC coordinates but no matter what i try i get junk after using the gluProject or gluUnProject (i've tried to do both ways but non is working)
GLdouble modelMatrix[16];
glGetDoublev(GL_MODELVIEW_MATRIX,modelMatrix);
GLdouble projMatrix[16];
glGetDoublev(GL_PROJECTION_MATRIX,projMatrix);
int viewport[4];
glGetIntegerv(GL_VIEWPORT,viewport);
POINT mouse; // Stores The X And Y Coords For The Current Mouse Position
GetCursorPos(&mouse); // Gets The Current Cursor Coordinates (Mouse Coordinates)
ScreenToClient(hWnd, &mouse);
GLdouble winX, winY, winZ; // Holds Our X, Y and Z Coordinates
winX; = (float)point.x; // Holds The Mouse X Coordinate
winY; = (float)point.y; // Holds The Mouse Y Coordinate
winY = (float)viewport[3] - winY;
glReadPixels(winX, winY, 1, 1, GL_DEPTH_COMPONENT, GL_FLOAT, &winZ);
GLdouble posX=s1->getPosX(), posY=s1->getPosY(), posZ=s1->getPosZ(); // Hold The Final Values
gluUnProject( winX, winY, winZ, modelMatrix, projMatrix, viewport, &posX, &posY, &posZ);
gluProject(posX, posY, posZ, modelMatrix, projMatrix, viewport, &winX, &winY, &winZ);
This is just part of the code i've tried. ofcourse not gluProject and gluUnProject together. just had them both here to show.....and i know there is lots of junk over there, its from some of my tries...
p.s. i've tried many many more combinations and examples from the web and nothing seem to work in my case....
Can any one show me what is the right way to do the transformation?
10x
It looks like you're trying to retrieve the object (or objects) that is/are at a particular point. If this is the case, gluProject and/or gluUnProject isn't really a very suitable tool for the task. OpenGL has a selection mode intended specifically for this kind of task.
In typical use, you specify a small square (e.g., 5x5 pixels) around the mouse click spot with gluPickMatrix, set selection mode with glRenderMode, set a buffer with glSwelectBuffer, and then draw your scene. The drawing doesn't go to the screen, but fills the buffer you specified wiyh records of what was drawn within the specified area.