Is it possible to fill only part of a shape (at least for a rectangle)? For instance 75% blue and 25% red as in a bargraph?
Or any advice on how to do it programmatically?
Of course I can always put a rectangle on top on another one but if I can do it with a single shape it would be better.
At the moment, draw.io doesn't support that but feel free to vote and track this feature request here:
https://trello.com/c/umCgQp6I/585-support-partial-filling
Regards,
Related
I get a graphical glitch whenever I try to split my tileset into a TextureRegion[][] and drawing them. It works fine when I am using the default aspect ratio but when the window has to stretch, it seems to be accessing a line of pixels from the next tile in the tileset and drawing them. Here is a picture (The lines I am referring to are the 2 vertical brown lines in the water. They seem to be from another tile in my tileset):
The lines also move when I move the player. And when I run the game on my tablet, a similar effect happens except its the bottom layer of my player's feet that appear above its head.
I saw a similar problem in stackoverflow (stackoverflow.com/questions/285...) but the solution did not work for me. It said I should put a padding but that just makes the lines transparent and you see the background color.
Here is the solution I found. Someone on stackoverflow asked a similar question and they got a working response. They made a tile bleeding fix method. Here is the post: White vertical lines and jittery horizontal lines in tile map movement
Credit to grimrader22. Thanks a lot!
Thanks everyone else who helped get me on the right track to getting the solution.
As you said, the usual solution is to add a padding.
The padding should be of the same color as the border of the tile. For example the water tiles should have a blue padding and the sand a yellow one.
That way you won't get the transparency and it will be seamless.
Hope it helps.
I am creating a vector drawing painting app and I have created a button that clears all the graphics (drawings) on the canvas. So basically, I just want to use pure white to "erase" all the drawings. Now I know there's other methods, but using this method is very important for future purposes. Now I want to clear the board of all graphics but the color,white, is this possible?
I feel like the best way to do this is to have two graphics you draw in, one for white, and one for everything else, that way you only clear the one. Not sure what you mean exactly since if the board is white, and you can already erase with white, what you are trying to accomplish by not clearing the white. Anyways add some more details if my suggestion doesn't work for you problem.
I'm having trouble understand how DisplacementMapFilter works. Basically, I'm trying to create a revolving planet through a combination of fisheye/masking.
Also, how do I go about doing this via timeline? I'm not too familiar with coding within it, but this is more of an animation project than anything else, so classes are out of the question. Sorry for the lack of code -- I'm simply stuck.
As noted in the comments above, this probably only answers half the problem;
Generating a displacement map image isn't too difficult with the right tools. I'll assume you're using Photoshop, GIMP, Fireworks, or similar.
It's probably best to work on a 128x128 image or smaller with this method. Some editors have more specialised tools which let you work on pretty much any size of image, but this is a generic process that needs no special tools. You can always enlarge the end result, but the quality will begin to go down.
Start with a gradient fill. It should go from pure black on the left to dark red on the right (specifically 128,0,0). Add a vertical fill from black at the top to dark green at the bottom (specifically 0,128,0), and combine them with a LIGHTEN or ADD filter. You should now have an image which has black, red, green and yellow corners. Flatten it.
Copy this image to another layer / whatever the term-of-choice is for your editor. Apply whatever displacement filter you want to it (maybe a fish eye, maybe a manual smudge, maybe a perspective transform, anything)
Add a third layer between the two. Flood-fill it with dark yellow (128,128,0) and set it to ADD / ADDITION blend mode. Set the top layer to SUBTRACT / SUBTRACTION blend mode.
That's it. You should get a mostly yellow image which will function as a displacement map.
Update:
To use this in the example program (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/DisplacementMapFilter.html#includeExamplesSummary), replace the createBitmapData function with this:
private function createBitmapData():BitmapData {
return myBitmapObject.bitmapData;
}
where myBitmapObject is the instance name (I think) of your displacement Bitmap. There are tidier ways of setting that up, but this is the easiest.
I have a small project I am working on HTML5 canvas and I wanted to get some ideas how to accomplish it. I have built an outline of a tree using all the canvas line functions. lineTo, bezierCurveTo, quadracticCurve, etc. I have attached a picture of the outline. Now, what I would like to do is have some code that fills a percent of this outline. Kind of like a progress bar starting from the bottom. Does anyone have ideas on how to accomplish this?
Thanks
Rather than thinking of the problem as having to fill a percentage of the inside of the tree, why not split the image into two layers, the tree and the "fill", and then draw one over the other. See my image below for a quick and dirty example.
Of course, you will need to obscure the rest of the "fill" layer, so you will need to fill the outside of the tree shape white, but this should be fairly easy as you already have the path worked out. In essence, your path would instead of being the outside edge of a a tree shape, become the inside edge of a tree shaped hole!
I'm using KImageMapEditor on Linux (Ubuntu) to create an image map. The shapes in the image are a little complex so I'm using the freehand tool to draw them. However, this is really the same as the polygon tool so the shapes have ended up with a lot of points, which has made the HTML pretty huge.
Does anyone know of a way to reduce the complexity of the shapes, like "smoothing out" the lines?
I should also mention the reason I want the shapes to be fairly accurate is because I'm intending to do something like this, where each shape is highlighted on mouseover: http://davidlynch.org/js/maphilight/docs/demo_usa.html
Since users aren't going to click to the pixel, give them some leeway and create a "sloppy" map which roughly outlines each shape instead of clinging to the actual pixel outline.
This is in the same way as you don't expect a click on a link to fail just because you click on the background which shines through the text. You expect the bounding box of the text to act as the click-able area instead of the "black pixels".
Algorithm: Given three consecutive points, eliminate the middle point if the angle created is less than some tolerated error e.
Polygonal path simplification with angle constraint