Android圆盘刻度,类似体重测试仪,效果不错哦

做了个效果,类似体重测试仪,先上效果


代码不多,就不上传了,我贴出来:

/**
 * 测量体重 公斤数0->200kg
 * Created by hailong on 2016/11/17 0017.
 */
public class WeightTestView extends View {
    public int Max = 200;//最大200Kg
    float weight;
    int verticalLineHeight;
    double indicateGap;//刻度之间的间距
    Paint mPaint = new Paint();
    int longWidth, middleWidth, shortWidth;//长刻度,中长刻度,短刻度

    public WeightTestView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setLayerType(View.LAYER_TYPE_HARDWARE, new Paint());
        init();
    }

    void init() {
        //计算
        //h1 表示刻度高度,h2 表示gap
        //h1 = 1px,h2 = ?,已知 (h1+h2)*200 = Math.PI*width,算出h2
        int width = dip2px(getContext(), getResources().getDimensionPixelSize(R.dimen.weight_size));
        indicateGap = width * Math.PI / 200;
        verticalLineHeight = getResources().getDimensionPixelSize(R.dimen.weight_indicate_height);
        mPaint.setStrokeWidth(verticalLineHeight);
        mPaint.setColor(getResources().getColor(R.color.indicateColor));
        mPaint.setAntiAlias(true);
        mPaint.setDither(false);
        mPaint.setFilterBitmap(true);
    }

    /**
     * dip转px
     *
     * @param context
     * @param dipValue
     * @return
     */
    public static int dip2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        Resources resources = getResources();
        longWidth = resources.getDimensionPixelSize(R.dimen.weight_long_width);
        middleWidth = resources.getDimensionPixelSize(R.dimen.weight_middle_width);
        shortWidth = resources.getDimensionPixelSize(R.dimen.weight_short_width);
    }

    private Bitmap createLabel(String label) {
        TextView view = (TextView) LayoutInflater.from(getContext()).inflate(R.layout.weight_label, null);
        view.setText(label);
        view.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
        view.setDrawingCacheEnabled(true);
        view.buildDrawingCache();
        Bitmap bitmap = view.getDrawingCache();
        return bitmap;
    }

    @Override
    protected void onDraw(Canvas canvas) {

        int width = getWidth();
        int height = getHeight();
        //画刻度
        //angle*R = arcWidth
        for (int i = 0; i < Max; i++) {
            double angle = 360.0f / Max;
            if (i % 5 == 0) {
                if (i % 10 == 0) {
                    //长刻度
                    canvas.save();
                    canvas.rotate((float) (i * angle), width / 2, height / 2);
                    canvas.translate(0, height / 2);
                    canvas.drawLine(0, 0, longWidth, 0, mPaint);
                    Bitmap label = createLabel(String.valueOf(i));
                    canvas.translate(longWidth + 5, -(label.getHeight() - verticalLineHeight) / 2);
                    canvas.drawBitmap(label, 0, 0, mPaint);
                    canvas.restore();
                    //画label

                } else {
                    //中长刻度
                    canvas.save();
                    canvas.rotate((float) (i * angle), width / 2, height / 2);
                    canvas.translate(0, height / 2);
                    canvas.drawLine(0, 0, middleWidth, 0, mPaint);
                    canvas.restore();
                }
            } else {
                //短刻度
                canvas.save();
                canvas.rotate((float) (i * angle), width / 2, height / 2);
                canvas.translate(0, height / 2);
                canvas.drawLine(0, 0, shortWidth, 0, mPaint);
                canvas.restore();
            }
        }

    }
}
使用:

/**
 * Created by hailong on 2016/11/17 0017.
 */
public class WeightTestActivity extends Activity {
    WeightTestView weight_view;
    EditText score_et;
    View weight_point;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.weight_test);
        weight_view = (WeightTestView) findViewById(R.id.weight_view);
        score_et = (EditText) findViewById(R.id.score_et);
        weight_point = findViewById(R.id.weight_point);
    }

    public void onTest(View view) {
        String lablel = score_et.getText().toString();
        try {
            float number = Float.parseFloat(lablel);
            weight_point.setPivotX(weight_point.getWidth());
            weight_point.animate().rotation(360.0f * (number * 1.0f / weight_view.Max)).setDuration(500).start();
        } catch (Exception e) {
            Toast.makeText(this, "请输入体重", Toast.LENGTH_SHORT).show();
        }
    }

    public void onReset(View view) {
        weight_point.animate().rotation(0).setDuration(500).start();
    }
}


如果有疑问的或者想交流的,可以加我QQ

623144766

<think>好的,我现在需要解决用户在Vue中组件未正确更新的问题,尤其是在点击“复制”按钮后弹窗内容没有及时显示,而是延迟加载的情况。用户提到希望通过修改key值或其他方法强制重渲染子组件。让我先理清楚可能的原因和解决方案。 首先,根据用户提供的引用内容,特别是引用[1]中的例子,他们之前通过设置key为时间戳来强制子组件刷新。这似乎是一个有效的方法,因为Vue的响应式系统在key改变时会重新创建组件实例。不过用户现在遇到了类似的问题,可能需要同样的方法,但需要确认是否正确应用。 然后,引用[2]提到Vue的异步更新队列,可能导致状态变化不会立即触发DOM更新。如果在同一个事件循环中多次修改状态,Vue可能只会处理最后一次的变更。这可能意味着用户在点击“复制”按钮后,某些状态没有被及时更新,导致弹窗内容没有正确显示。 接下来,我需要考虑可能的解决方案。除了修改key值之外,还有其他方法可以强制组件重新渲染,比如使用this.$forceUpdate()或者改变组件的某个prop。但修改key值通常是推荐的方法,因为它更直接地触发组件的销毁和重新创建,确保状态完全重置。 用户的问题具体是在点击“复制”按钮时弹窗内容没有正确显示。可能的情况是,弹窗组件依赖于某些数据,而这些数据在按钮点击后没有及时触发更新。例如,可能在打开弹窗时,数据还未被正确赋值,或者由于Vue的异步更新机制,DOM没有及时渲染。 我需要检查用户可能的代码结构。假设弹窗组件是一个子组件,当点击“复制”按钮时,父组件会修改某些数据,然后显示弹窗。如果弹窗的内容依赖于这些数据,但数据的变化没有被及时检测到,或者弹窗组件没有重新渲染,就会导致内容显示不正确。 根据引用[1]中的例子,用户之前通过给子组件设置:key="timer",并在打开弹窗时更新timer的值,从而强制子组件重新渲染。同样的方法可能适用于当前的问题。即在点击“复制”按钮时,更新key的值,确保子组件每次打开时都重新创建,而不是复用之前的实例。 另外,需要注意在关闭弹窗时,是否正确地重置了相关的数据和key的值。例如,在弹窗关闭事件中,将timer置为null或新的时间戳,以确保下次打开时key值不同,触发重新渲染。 还有可能涉及到Vue的响应式数据更新问题。如果用户的数据结构较为复杂,或者使用了嵌套对象,Vue可能无法检测到数据的变化。这时候可能需要使用Vue.set或this.$set来确保属性的响应式更新。 此外,引用[3]中提到的主进程和渲染进程之间的通信机制,可能不直接相关,但如果用户的应用涉及Electron或其他类似框架,可能需要考虑跨进程通信对状态更新的影响,不过用户当前的问题集中在Vue组件本身,暂时可以排除这方面的因素。 总结可能的解决步骤: 1. 在弹窗子组件上使用:key属性,并将其绑定到一个响应式的变量(如timer)。 2. 在点击“复制”按钮时,更新timer的值,通常使用时间戳,确保每次点击时key值不同。 3. 在弹窗关闭时,重置timer或其他相关状态,确保下次打开时能再次触发更新。 4. 检查数据更新的时机,确保在打开弹窗前数据已经正确赋值,可能需要使用this.$nextTick来确保DOM更新。 需要验证用户是否正确地应用了这些步骤。例如,是否在点击按钮时更新了key的值,是否在关闭时重置,是否有其他因素导致数据未及时更新。 另外,如果用户的数据更新存在异步操作,比如从API获取数据,可能需要确保在数据加载完成后再打开弹窗,或者使用v-if指令控制弹窗的显示,结合key的变化来强制重渲染。 最后,还要考虑是否有其他优化手段,比如使用计算属性或侦听器来响应数据变化,但关键点还是通过修改key来强制组件重新渲染,确保内容正确显示。</think>在Vue中强制子组件重渲染的解决方案如下: ### 一、通过修改key值强制重渲染 1. **绑定动态key属性** 在弹窗子组件上绑定`:key`属性,值为响应式变量: ```vue <codemirror-editor ref="editor" :key="componentKey" v-model="content" ></codemirror-editor> ``` 2. **点击操作时更新key值** 在"复制"按钮事件中修改key值触发重建: ```javascript handleCopy() { this.componentKey = new Date().getTime(); // 时间戳更新key this.showModal = true; // 显示弹窗 } ``` 3. **关闭弹窗时重置状态** 弹窗关闭时清空关键数据: ```javascript closeModal() { this.componentKey = null; // 可选重置操作 this.content = ''; this.showModal = false; } ``` ### 二、其他辅助优化方法 1. **使用$nextTick确保DOM更新** 在异步操作后强制更新: ```javascript this.$nextTick(() => { this.componentKey = new Date().getTime(); }); ``` 2. **通过v-if控制生命周期** 结合`v-if`与`key`双重保障: ```vue <codemirror-editor v-if="showModal" :key="componentKey" ></codemirror-editor> ``` 3. **使用Vue.set处理深层次对象** 当数据层级较深时: ```javascript Vue.set(this.dataObj, 'nestedProp', newValue); ``` ### 三、原理说明 Vue通过虚拟DOM的diff算法判断组件是否需要更新。当`key`值改变时,会销毁旧组件实例并创建新实例,达到强制重渲染的目的[^1]。这种方法比`$forceUpdate()`更彻底,后者仅触发重新渲染但不重置组件状态[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值