How do you remove a Bitmap in android? I have created a bitmap that is called"sun" but as soon as I have finished a guy walking across the screen I want to add a new bit map called "moon" but it just gets created over top of the sun, how can I remove the sun bitmap? here is my code for the walking guy.
switch (counter)
{
case 0:
skyRect.set(0, 0, canvas.getWidth(), 400);
canvas.drawRect(skyRect, sky);
canvas.drawBitmap(AndroidDude, changingX, (canvas.getHeight()/2 - (AndroidDude.getHeight()/2)), null);
if (changingX < canvas.getWidth())
{
changingX += 10;
}
else
{
changingX = 0;
sunChangingX = 0;
counter++;
}
grassRect.set(0, 400, canvas.getWidth(), canvas.getHeight());
canvas.drawRect(grassRect, grass);
canvas.drawBitmap(cloud, 100, 50, null);
canvas.drawBitmap(cloud, 700, 100, null);
canvas.drawBitmap(sun, (canvas.getWidth() - sun.getWidth()), 0, null);
invalidate();
break;
case 1:
//Remove sun and clouds here?
canvas.drawBitmap(moon, (canvas.getWidth() - moon.getWidth()), 0, null);
canvas.drawBitmap(AndroidDude, changingX, (canvas.getHeight()/2 - (AndroidDude.getHeight()/2)), null);
if (changingX < canvas.getWidth())
{
changingX += 10;
}
else
{
changingX = 0;
counter++;
}
grassRect.set(0, 400, canvas.getWidth(), canvas.getHeight());
canvas.drawRect(grassRect, grass);
canvas.drawBitmap(cloud, 100, 50, null);
canvas.drawBitmap(cloud, 700, 100, null);
canvas.drawBitmap(sun, sunChangingX, 0, null);
invalidate();
break;
}
Redraw your background (sky and grass) over the bitmap you want removed. Make a refresh function.
You just draw new things over the old ones. If you need to "erase" something, you just redraw the background.
Canvas.drawColor(Color.WHITE);
or
You can have to clean canvas so
you can draw rectangle with WHITE color.
// or whatever your canvas color
It will looks like canvas is blank.
and again draw what ever you want.
your output will display on white color.
Related
I want to be able to have animate a sprite by using 3 different images when a key is pressed how would I do so, with an array as well as without one.
You can easily repurpose the Processing Animated Sprite example. You'll need one Animation instance and keyPressed() to animate the sprite (e.g. toggle frame updates)
Shameless plug: another option is using a library such as ImageSequencePlayer
If you want to avoid arrays and libraries this technique will work. The frameRate() needs to turned down to 4 or 5 and then place a counter in the draw() which is reset to zero when it exceeds the number of images. As the counter value is passed to a display function it then displays the corresponding image. The images should be placed in a folder titled "data" in the sketch folder.
/*
Must be GIF, JPEG, or PNG images
*/
PImage img0;
PImage img1;
PImage img2;
PImage img3;
PImage img4;
int counter = 0;
void setup() {
size(400, 400);
img0 = loadImage("frog0.png");
img1 = loadImage("frog1.png");
img2 = loadImage("frog2.png");
img3 = loadImage("frog3.png");
img4 = loadImage("frog4.png");
}
void display(int count) {
switch(count) {
case 0:
image(img0, 0, 0, width, height);
break;
case 1:
image(img1, 0, 0, width, height);
break;
case 2:
image(img2, 0, 0, width, height);
break;
case 3:
image(img3, 0, 0, width, height);
break;
case 4:
image(img4, 0, 0, width, height);
break;
}
}
void draw() {
frameRate(4);
display(counter);
counter++;
if (counter > 4) {
counter = 0;
}
}
I'm trying to change background color of one LinearLayout to two colors for some reasons like the following pic:
I'm writing this code but the problem this LinearLayout take third different color for the two parts like this pic:
What is the problem in the logic of my code I don't know or I can not do something like that in Android?
Code:
c = (LinearLayout) findViewById(R.id.cell);
c.setBackgroundColor(getColor(container.get(0)));
c.setBackgroundColor(getColor(container.get(1)));
int width = c.getWidth(), height = c.getHeight();
if (width == 0 || height == 0) {
width = 100;
height = 100;
}
Bitmap bitmap;
try {
bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
} catch (Exception e) {
e.printStackTrace();
return;
}
Canvas canvas = new Canvas(bitmap);
Path path = new Path();
path.moveTo(0, height);
path.lineTo(0, 0);
path.lineTo(width, 0);
path.lineTo(0, height);
path.close();
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(getColor(container.get(0)));
canvas.drawPath(path, paint);
path = new Path();
path.moveTo(width, 0);
path.lineTo(width, height);
path.lineTo(0, height);
path.lineTo(width, 0);
path.close();
paint = new Paint();
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(getColor(container.get(1)));
canvas.drawPath(path, paint);
I solved my problem, the problem was in the way of parsing color in setColor method I replaced this one:
paint.setColor(getColor(container.get(1)));
by:
paint.setColor(ResourcesCompat.getColor(getResources(),getColor(container.get(1)), null));
and everything is ok now.
I am implementing the following Class from Stackoverflow
https://stackoverflow.com/a/20811323/1936925
but I need a bubble like this
I am trying a lot, but don't know how to do it.
What edits do I need to do in order to get the above drawable.
Try this:
public Bitmap overlay(Bitmap image, String content) {
BitmapFactory.Options options = new BitmapFactory.Options();
options.inScaled = false;
options.inPreferredConfig = Bitmap.Config.ARGB_8888;
//My bg bitmap, use yours
Bitmap background = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(MapActivity.context.getResources(), R.drawable.marker_base, options), marker_width, marker_height, true);
//your red bitmap here
Bitmap bmOverlay = Bitmap.createBitmap(background.getWidth(), background.getHeight(), background.getConfig());
Canvas canvas = new Canvas(bmOverlay);
Paint paint = new Paint();
paint.setFilterBitmap(true);
canvas.drawBitmap(background, new Matrix(), paint);
canvas.drawBitmap(image, 3, 3, paint);
if (content != null)
{
//Use your TextSize and Color and paddings
paint = new Paint();
paint.setColor(Color.BLACK);
if (content.length() < 11)
paint.setTextSize(13);
else
paint.setTextSize(10);
//30 / 28, 17 - my paddings
canvas.drawText(content, (content.length() < 11)?30:28, 17, paint);
}
return bmOverlay;
}
Solved
mPointer.rLineTo(80, 0);
mPointer.rLineTo(0, 60);
mPointer.rLineTo(-(80), -60);
mPointer.close();
so, here is the question, i need to draw the position indicator corresponding to my hand position and then perform some manipulations on an image
here is the screen capture:
the left half of the screen is the image, and the right half of the screen is my camera,
the program will draw the position indicator corresponding to my hand position,
my problem is that the cursor cannot be disappeared and it will draw many times!
here is the code:
import gab.opencv.*;
import processing.video.*;
import java.awt.*;
PImage img;
PImage select;
PImage cur;
OpenCV opencv;
Capture cam;
int prevPositionX, prevPositionY, currPositionX, currPositionY;
int mode = -1; //mode 1 = s (select) mode 2 = c (copy) mode 3 = d (draw)
int select_ind = -1;
//store every dectected things
Rectangle[] hand;
//store the biggest hand
Rectangle bhand;
void setup() {
size(1280, 480);
img = loadImage("test.jpg");
cur = loadImage("cursor.png");
stroke(255,10,0);
opencv = new OpenCV(this, 640, 480);
opencv.loadCascade("aGest.xml");
cam = new Capture(this, 640, 480);
cam.start();
image(img, 0, 0, img.width, img.height);
}
void draw(){
if (cam.available()==true) {
cam.read();
}
opencv.loadImage(cam);
hand = opencv.detect();
pushMatrix();
scale(-1.0, 1.0);
image(cam, -1280, 0);
popMatrix();
int handcount = -1;
int handsize = -1;
//calculate the biggest hand
for( int i=0; i < hand.length; i++ ) {
if(handsize < (hand[i].width * hand[i].height)){
handsize = hand[i].width * hand[i].height;
handcount = 1;
bhand = hand[i];
}
}
if(handcount > 0){
rect(1280 - bhand.x, bhand.y, -bhand.width, bhand.height);
noFill();
//draw the position indicator
image(cur, 480 - bhand.x, bhand.y, 16, 16);
prevPositionX = currPositionX;
prevPositionY = currPositionY;
currPositionX = 480 - bhand.x + 4;
currPositionY = bhand.y;
//select mode
if (mode == 1){
}
//copy mode
else if (mode == 2){
}
//draw mode
else if (mode == 3){
line(prevPositionX,prevPositionY,currPositionX,currPositionY);
}
}
}
void keyPressed(){
if(key=='s'||key=='S')
mode = 1;
else if(key=='c'||key=='C')
mode = 2;
else if(key=='d'||key=='D')
mode = 3;
else if(key=='i'||key=='I')
image(img, 0, 0, img.width, img.height);
}
void keyReleased(){
if(select_ind > -1 && mode == 2){
//to be done
}
mode = -1;
}
i am working with the drawing mode which is to draw a line on the image,
and i know the problem but i do not know how to solve it,
i need to add this : image(img, 0, 0, img.width, img.height); to the first
of draw() function, but the line will also be deleted. i want to keep
the line like the screen capture.
Please give me a hand and sorry for the bad english. Thanks
If you need to persist just part of the draw, you need to redraw it every frame, while still "clearing" the background using image(img, 0, 0, img.width, img.height). This means store coordinates of lines and redraw it every time, also note that you can hide the cursor... SomeThing like this:
// YOU GOT ADD (CLICK) AT LEAST 2 POINTS TO SEE IT WORKING ;)
ArrayList<PVector> positions = new ArrayList<PVector>();
void setup(){
size(600, 600);
//if you don't want to see the cursor...
noCursor();
}
void draw(){
//clear screen
background(255);
//always draw at mousePosition
//a "custom cursor"
//that will not persist as screen is beeing cleared
fill(200,80,220);
noStroke();
ellipse(mouseX, mouseY, 20, 20);
stroke(80);
PVector prevP = null;
for (PVector p:positions) {
if(prevP != null) {
line(prevP.x, prevP.y, p.x, p.y);
}
prevP = p.get();
}
}
void mouseClicked() {
positions.add(new PVector(mouseX, mouseY));
}
EDIT:
Also you can use PGraphics as layers to persist just part of the drawing without redrawing all the stuff over and over... :)
I am using a paintComponent Class in a project of mine, and I am currently wondering how I can decrease the size of the rectangle from the top making it's way downwards.
This is the part of the code:
public Battery(){
super();
firstTime = true;
f = new Font("Helvetica", Font.BOLD, 14);
m = Toolkit.getDefaultToolkit().getFontMetrics(f);
}
public void paintComponent(Graphics g){
if(firstTime){
firstTime = false;
batteryLevel = 1 + this.getHeight();
decr = batteryLevel / 20;
}else{
g.setColor(Color.RED);
g.fillRect(1, 0, this.getWidth(), this.getHeight());
g.setColor(Color.GREEN);
g.fillRect(1, 0, this.getWidth(), batteryLevel);
g.setColor(Color.BLACK);
g.setFont(f);
g.drawString("TEST", (getWidth() - m.stringWidth("TEST")) / 2 , this.getHeight() / 2);
}
}
public void decreaseBatteryLevel(){
batteryLevel -= decr;
this.repaint();
}
PS. Sorry if I did something wrong, I'm new to this forum.
As you want the visible battery level to descend you will want to increase your Y co-ordinate in relation to the value of batteryLevel. You could use:
g.fillRect(1, getHeight() - batteryLevel, getWidth(), batteryLevel);
Instead
g.fillRect(1, 0, this.getWidth(), batteryLevel);
Do
g.fillRect(1, batteryLevel, this.getWidth(), getHeight() - batteryLevel);
Also maybe repaint(50L) instead of repaint().
If your question meant: how to animate a change in the battery level.
Use a javax.swing.Timer:
int toPaintBatteryLevel = batteryLevel;
// In the paintComponent paint upto toPaintBatteryLevel.
Timer timer = new Timer(100, new ActionListener() {
public void actionPerformed(ActionEvent e) {
if (toPaintBatteryLevl == batteryLevel) {
return;
}
if (toPaintBatteryLevl > batteryLevel) {
--toPaintBatteryLevel; // Animate slowly
} else {
toPaintBatteryLevel = batteryLevel; // Change immediately
}
repaint(50L);
};
});
timer.start();
For ease of coding, there is a permanent timer. And externally one changes the batteryLevel,
and the time determines the toPaintBatteryLevel, which paintComponent uses to paint.