手势自动绘制本身手势

2023-09-08 08:43:29 作者:囍槑

我已经看到了它在海豚浏览器。还有就是一些手势that're已经默认创建的。他们将重绘自己,让用户知道从哪里开始绘制。我注意到,在手势对象,有一个名为toPath()的方法。但我不知道如何使用它,我不知道如果我在正确的轨道上。有人能告诉我该怎么办呢?谢谢。你可以先看看下面的图片。

I've seen it on Dolphin Browser. There're some gestures that're already created by default. They will redraw themselves so that users know where to begin drawing. I've noticed that in Gesture object, there's a method named toPath(). But I have no clue how to use it and I'm not sure if I'm on the right track. Can somebody tell me how to do it? Thanks. You can take a look at the picture below.

推荐答案

所有我会建议看看 GestureBuilder 从SDK样本应用程序的第一个。它正是显示在你的问题(小姿态缩略图)。

First of all I would suggest to take a look at GestureBuilder app from SDK samples. It has exactly that is shown in your question (small gesture thumbnails).

我略有延长的典范之作手势的使用的API更加清晰:

I've slightly extended that example to make usage of Gesture APIs more clear:

添加以下code到 GestureBuilderActivity 从 GeatureBuilder 示例:

Add the following code into GestureBuilderActivity from GeatureBuilder sample:

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
    super.onListItemClick(l, v, position, id);

    final Intent intent = new Intent(getApplicationContext(), ShowGestureActivity.class);

    intent.putExtra(ShowGestureActivity.GESTURE_NAME_EXTRA, ((NamedGesture)v.getTag()).name);
    startActivity(intent);
}

这将推出新的测​​试活动的 ShowGestureActivity

public class ShowGestureActivity extends Activity {
    public static final String GESTURE_NAME_EXTRA = "gesture_extra";
    private Gesture mGesture = null;
    private FrameLayout mContainer;
    private MyPathView mMyPathView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.show_gesture);

        final ArrayList<Gesture> gestures = GestureBuilderActivity.getStore()
                .getGestures(getIntent().getStringExtra(GESTURE_NAME_EXTRA));

        if (gestures.size() == 1) {
            mGesture = gestures.get(0);
        } else {
            Toast.makeText(getApplicationContext(), "No gesture available!", Toast.LENGTH_LONG).show();
        }

        mContainer = (FrameLayout) findViewById(R.id.container);
        mMyPathView = (MyPathView) findViewById(R.id.myPathView);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.show_gesture_menu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        final int id = item.getItemId();

        if (mGesture == null) {
            return false;
        }

        switch (id) {
            case R.id.action_show_gesture_bmp:
                final Bitmap gestureBmp = mGesture.toBitmap(mContainer.getWidth(), mContainer.getHeight(),
                        getResources().getDimensionPixelSize(R.dimen.gesture_thumbnail_inset), Color.YELLOW);

                mMyPathView.setVisibility(View.GONE);
                mContainer.setBackground(new BitmapDrawable(getResources(), gestureBmp));
                return true;

            case R.id.action_show_gesture_path:
                mMyPathView.setPath(mGesture.toPath(mContainer.getWidth(), mContainer.getHeight(),
                        getResources().getDimensionPixelSize(R.dimen.gesture_thumbnail_inset), 10));
                mMyPathView.setVisibility(View.VISIBLE);
                mContainer.setBackground(null);
                return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

onOptionsItemSelected 你可以看到可用绘制两个手势方法的使用。似乎 toBitmap 是很清楚的( GesturesBuilder 应用本身使用的手势缩略图方式显示在列表中)。关于 toPath :它提供给你对应于手势的路径。之后,你可以使用路径绘制你想要的。 MyPathView 从测试活动提供上面这样做的最简单的方法:

In onOptionsItemSelected you can see usage of both Gesture methods available for drawing. Seems toBitmap is quite clear (GesturesBuilder app itself uses that method for gestures thumbnails display in the list). Regarding toPath: it provides you with the path which corresponds to the Gesture. After that you can use that path for drawing as you want. MyPathView from test activity above provides easiest way of doing so:

public class MyPathView extends View {
    private Paint mPaint;
    private Path mPath = null;

    public MyPathView(Context context) {
        super(context);
        init(null, 0);
    }

    public MyPathView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public MyPathView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        mPaint = new Paint();
        mPaint.setColor(Color.YELLOW);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(getResources().getDimensionPixelSize(R.dimen.paint_width));
    }

    public void setPath(final Path path) {
        mPath = path;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (mPath != null) {
            canvas.drawPath(mPath, mPaint);
        }
    }
}

和XML是(只是为了举例方便编译):

And xml is (just to make example easy to compile):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/container">

    <com.sandrstar.testapp.test.MyPathView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/myPathView"
        android:visibility="gone"/>
</FrameLayout>

如果你想申请某种动画姿态绘画,你需要获得路径,创建如上所述的自定义视图,并应用了一些动画的方法,例如就像一个在这里描述的Draw与动画帆布路径

If you want to apply some kind of animation to gesture drawing, you need to get path, create custom view as described above and apply some animation method, e.g. like one described here Draw path on canvas with animation