有没有一种方法可以在运行时创建的Android中制作异形按钮？

Question

We are creating an app where you can create shaped buttons at run time to map images, something like this: http://www.outsharked.com/imagemapster/default.aspx?demos.html#vegetables We try with Android Paths but you can not make the paths disappear or change the color.

Do you have an idea?

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Botones btn = new Botones(this);

        setContentView(btn);

    }

    private class Botones extends View {

        ArrayList<Path> paths = new ArrayList<Path>();
        ArrayList<Paint> paints = new ArrayList<Paint>();

        public Botones(Context context) {
            super(context);
        }
        public Paint paintn;
        public Paint paintb;
        public Canvas canvasg;
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvasg = canvas;
            paintn = new Paint();
            paintn.setColor(getColor(R.color.colorAccent));
            paintn.setStyle(Paint.Style.STROKE);
            paintn.setStrokeWidth(8);
            paintn.setStyle(Paint.Style.FILL);
            paints.add(paintn);

            paintb = new Paint();
            paintb.setColor(getColor(R.color.linea));
            paintb.setStyle(Paint.Style.STROKE);
            paintb.setStrokeWidth(8);
            paintb.setStyle(Paint.Style.FILL);
            paints.add(paintb);



            coordenadas(canvas);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {

            float x;
            float y;
            x = event.getX();
            y = event.getY();

            for (Path p : paths){
                RectF pBounds=new RectF();
                p.computeBounds(pBounds,true);
                if (pBounds.contains(x,y)){
                    Log.i("path", "tocado");
                    //paints.get(0).setColor(getColor(R.color.linea));
                    canvasg.drawPath(p, paintb);
                }
            }

            return super.onTouchEvent(event);
        }

        public void coordenadas(Canvas canvas) {

            int i;
            boolean tipo = true;

            String cadena = "13, 421, 7, 587, 274, 590, 262, 467, 106, 506, 65, 444, 12, 416" +
                "|81, 13, 95, 55, 378, 70, 368, 4" +
                "|543, 88, 522, 218, 751, 228, 750, 133, 602, 111" +
                "|34, 268, 33, 383, 278, 389, 433, 356, 429, 288, 281, 312" +
                "|46, 55, 21, 131, 119, 172, 275, 158, 273, 106, 89, 79";
            String cadenaArray[] = cadena.split("\\|");

            for (String img : cadenaArray) {

                ArrayList<Float> x = new ArrayList<Float>();
                ArrayList<Float> y = new ArrayList<Float>();

                String imgArray[] = img.split("\\,");
                for (String coordena : imgArray){
                    float fin = Float.parseFloat(coordena);
                    if (tipo){
                        x.add(fin);
                    } else {
                        y.add(fin);
                    }
                    tipo = !tipo;

                }

                dibujar(x,y, canvas);
            }
        }

        public void dibujar(ArrayList<Float> coordx, ArrayList<Float> coordy, Canvas canvas){
            Path path =new Path();
            paths.add(path);
            canvas.drawColor(getColor(android.R.color.transparent));

            path.moveTo(coordx.get(0), coordy.get(0));

            for (int z = 1; z < coordx.size(); z++){
                path.lineTo(coordx.get(z),coordy.get(z));
            }
            path.lineTo(coordx.get(0),coordy.get(0));
            canvas.drawPath(path, paintn);
        }
    }
}

Answer 1

I haven't practiced yet but I have found a solution. Since android studio supports javascript and css, you can do what you asked. In your given link, you can find the javascript and css file of your intended task. Then you can follow this given link where it gives all the information about adding javascript and css in Android Studio. Follow this link .

Answer 2

You can use a touch delegate (it's in the Android SDK) to achieve this. You'll probably have a hard time creating your shape, but you can give it a go :)

Here's an excerpt from Vogella's tutorial ( http://blog.vogella.com/2012/04/15/android-using-touchdelegates/ ):

/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mButton = (Button) findViewById(R.id.delegated_button);
        View parent = findViewById(R.id.root);
        parent.post(new Runnable() {
            public void run() {
                // Post in the parent's message queue to make sure the parent
                // lays out its children before we call getHitRect()
                Rect delegateArea = new Rect();
                Button delegate = mButton;
                delegate.getHitRect(delegateArea);
                delegateArea.top -= 600;
                delegateArea.bottom += 600;
                delegateArea.left -= 600;
                delegateArea.right += 600;
                TouchDelegate expandedArea = new TouchDelegate(delegateArea,
                        delegate);
                // give the delegate to an ancestor of the view we're
                // delegating the
                // area to
                if (View.class.isInstance(delegate.getParent())) {
                    ((View) delegate.getParent())
                            .setTouchDelegate(expandedArea);
                }
            };
        });
    }

Good luck!

Answer 3

The only way that do this is making a call of invalidate() in this way the onDraw () is called and redraw the entire view using the changes that you wanted.

The canvas is not valid after the onDraw() is finished.

I hope this helps