When you use Graphics.drawTriangles() and Graphics.beginBitmapFill() to draw two triangles to create a rectangle face, when the face is not square or rectangle, but rather a trapezoid, or an irregular shape, the bitmap used to fill the face is distorted. In order to correct the distortion, Papervision3D has a Boolean property precise. But how does it work?
Thanks! :)
Related
I have a complex shape that's been generated from an SVG file that we're clipping images to in canvas.
However, all of the bezier curve coordinates are based on 0,0. Our shape's size scales depending on the size of the canvas (which scales based on the user's screen width).
Is there a way to take the shape that's already been drawn and then move it to a certain position on the canvas? Much like ctx.scale(#, #) will scale the drawn shape?
Thanks!
Use ctx.translate() to change the position of items on your canvas.
See: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations#Translating
Using translate will alter the position of everything that is subsequently drawn on the canvas. If you just want to move one thing, you can either do:
ctx.translate(x,y);
// draw something
ctx.translate(-x,-y);
or you can do:
ctx.save();
ctx.translate(x,y);
// draw something
ctx.restore();
I have a number of square regions in my game screen which, when actors move across these regions, I want the background image to show through from behind.
So, is it possible to draw to a SpriteBatch such that a region is subtracted/deleted from the texture (effectively "punching a hole" in it)?
I can't think how else to achieve this... Scissors seem incredibly impractical for my purpose, as I want to clip the areas INSIDE a number of squares. This is the inverse of Scissors - which clip areas OUTSIDE the scissors' bounds. The thought of calculating dozens of Scissor regions to fill the inverse areas between an assortment of square regions seems too impractical to be the solution... especially if the regions are moving.
Any help or suggestions appreciated!
UPDATE: Image attached.
I want the background to always be visible in the areas marked with the dotted lines. The dotted areas will move, so I'd rather not create more sprites from the background to lay on top, but rather have parts of the actors intersecting the dotted squares not be drawn. (Or any method that will achieve the same effect.)
I think the best hack is to not try and be so precise about clipping your actors, but to just re-draw the background on top the actors (and to clip that).
Specifically:
draw the whole background
draw your actors/sprites
draw the background with one cliprect for one part that "shows through"
draw the background with another cliprect for the other part that "shows through"
draw the dotted boxes around your cliprect areas
Great image, by the way. Easily worth 1000 words. :)
Is it possible to apply transformations to an image to transform it in a trapezium?
The image initial state is a rectangulum.
The way my scene is build, I have a polygon that allows dragging on the edges, and an image with the same size and position.
I would like the image to have the same shape of the polygon aways, so it would became a trapezium when one polygon axis is dragged. Is this possible?
I assume you're talking about something like an isosceles trapezoid rather than a simple rectangle.
The answer is No, but Yes...
No, not possible with 2D transforms--canvas.getContext("2d"). That's because 2d transforms use a 3x3 matrix that only makes parallel transforms. Since a trapezoid is non-parallel, you cannot possibly transform an image (rectangle) into a trapezoid.
But, Yes...you can use webGL (canvas 3D transforms) to do non-parallel transforms and therefore you can use canvas 3D to convert an image into a trapezoid.
My objective is to color a rectangle shape in winRT.When the brush leaves rectangle border the coloring should stop.So after coloring I need a fill colored rectangle.
Any help will be really appreciated.
Thanks in advance.
You can use the Clip property to clip any element to a rectangle shape. Note though that right now it only support rectangle clips and for more you would need to use Direct2D or process all the pixels yourself.
I have two images, a gameboard and the same gameboard with all posible player positions in a pressed state. When a player moves to a position on the board, I put the board image over the pressed board image and slice using context.drawImage() on the pressed image, to display the pressed position through the slice. However, my game board contains positions which are not rectangular but different shapes.
Is it possible with html 5 canvas, to cut a non-rectangular shape out of an image to display the underlying image?
I found it's possible to use clip() on shapes but I can't find a similar option on images.
you can create a third image that is a mask with transparent (alpha-channel) pixels and non-transparent pixels, and use a
globalCompositeOperation
to merge the mask and the to-be-masked image into a new image ( think you can use an xor or source-out here..