滚动过大帆布 [英] Scrolling over large canvas

问题描述

我需要一些帮助理解滚动过被吸引到Android的画布项目的基础。假设我想创建一个时间表，时间为0是一个可视化的顶部，并随着时间增加的时间表继续低于previous点进行渲染。如果我想使这个在Android上，我知道通过重写OnDraw的画布上我可以简单地创建一批项目的（）。然而，让我们假设可视化大于屏幕允许。

I need some help understanding the fundamentals of scrolling over items that are drawn to a canvas in Android. Suppose I want to create a timeline where time at 0 is the top of a visualization and as time increased the timeline continues to be rendered below the previous point. If I wish to render this on Android I know I could simply create a bunch of items on a canvas by overriding onDraw(). However, let's suppose the visualization is bigger than the screen allows.

例如在下面的大黑盒子的第一张照片包含了整个画布，我渲染。我创建运行竖直上下以蓝线以及多个黄色，绿色和蓝色矩形。红色框重新presents了Android正在呈现可视化的界面。由于最初打开的所有项目绘制，但只有包含在红框中的项目显示在屏幕上。

For example in the first picture below the large black box contains the entire canvas as I render it. I create a blue line that runs vertically up and down as well as several yellow, green and blue rectangles. The red box represents the screen of the Android that is rendering the visualization. As it initially opens all items are drawn but only the items contained within the red box show up on the screen.

现在，如果用户向下滚动，最初出现下面的红框中的项目是美景，一边出去了红色框的范围中的项目已不再visable，如psented第二重$ P $图片。

Now if the user is to scroll down, items that initially appeared below the red box are in view while items that have gone out of the confines of the red box are no longer visable, as represented in the second picture.

我相信我需要使用scrollables但我很丢了怎么办等等。我读了这个网页。 http://developer.android.com/培训/自定义的看法/自定义drawing.html 解释如何创建自己的商品图片并在本页面的 http://developer.android.com/training/custom-views/making-interactive.html 解释如何使用户界面的交互，但是我觉得我失去了一些东西。

I believe I need to use scrollables but I'm quite lost how to do so. I've read over this page http://developer.android.com/training/custom-views/custom-drawing.html explaining how to create your own customer images and this page http://developer.android.com/training/custom-views/making-interactive.html explaining how to make the UI interactive, but I think I'm missing something.

一个样本code，它说明了这个问题（这是基本的，假设有逻辑的笔录，其中盒/线去，等）如下：

A sample code that illustrates this problem (this is basic, assume there is logic dictating WHERE the boxes/lines go, etc.) is as follows:

package com.example.scrolltest;

import com.example.scrolltest.Draw;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;

public class MainActivity extends Activity {
    Draw draw;

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

    draw = new Draw(this);
    draw.setBackgroundColor(Color.WHITE);
    setContentView(draw);
    }
}

和

package com.example.scrolltest;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;


public class Draw extends View {
    Paint paint = new Paint();

    public Draw(Context context) {
        super(context);            
    }

    @Override
    public void onDraw(Canvas canvas) {

        paint.setColor(Color.GREEN);
        canvas.drawRect(30, 30, 90, 200, paint);
        paint.setColor(Color.BLUE);

        canvas.drawLine(100, 20, 100, 1900, paint);

        paint.setColor(Color.GREEN);
        canvas.drawRect(200, 2000, 400, 3000, paint);
        }
}

我想不出什么不过，我是怎么用滚动向下滚动到是在屏幕的矩形。我也不能确定，如果我正确地开始这个还是应该使用可绘制，而不是...

What I cannot figure out though, is how I use a scrollable to scroll down to the rectangles that are off of the screen. I'm also unsure if I started this correctly or should use drawables instead...

推荐答案

简单方法（如果需要的高度不是非常大）。

使用滚动型和添加绘图视图它。计算所需的高度在onMeasure这一观点。

Use a ScrollView and add your Draw view in it. Compute the required height for that view in onMeasure.

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

draw = new Draw(this);
draw.setBackgroundColor(Color.WHITE);
ScrollView scrollView = new ScrollView(this);
scrollView.addView(draw);
setContentView(scrollView);
}

public class Draw extends View {
        Paint paint = new Paint();

        public Draw(Context context) {
            super(context);            
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            // Compute the height required to render the view
            // Assume Width will always be MATCH_PARENT.
            int width = MeasureSpec.getSize(widthMeasureSpec);
            int height = 3000 + 50; // Since 3000 is bottom of last Rect to be drawn added and 50 for padding.
            setMeasuredDimension(width, height);
        }

        @Override
        public void onDraw(Canvas canvas) {

            paint.setColor(Color.GREEN);
            canvas.drawRect(30, 30, 90, 200, paint);
            paint.setColor(Color.BLUE);

            canvas.drawLine(100, 20, 100, 1900, paint);

            paint.setColor(Color.GREEN);
            canvas.drawRect(200, 2000, 400, 3000, paint);
            }
    }

这篇关于滚动过大帆布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！