垂直虚线效果

public class DashedLineView extends View {
                                                                                                                    
    public DashedLineView(Context context, AttributeSet attrs) {
        super(context, attrs);            
                                                                                                                          
    }  
                                                                                                                  
    @Override  
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub  
        super.onDraw(canvas);          
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(40f);//布局里一般会写1dp,此处宽度不做限制
        paint.setColor(getResources().getColor(R.color.bg_divider_main));
        Path path = new Path();
        path.moveTo(0, 0);//起始坐标
        path.lineTo(0,500);//终点坐标
        PathEffect effects = new DashPathEffect(new float[]{5,5,5,5},1);//设置虚线的间隔和点的长度,数组的含义:先画5实线,再空5,再画5实线,再空5
        paint.setPathEffect(effects);  
        canvas.drawPath(path, paint);  
    }
}

### 实现 Cesium 中带垂直虚线效果的点 要在 Cesium 中实现带有垂直虚线效果的点,可以通过组合 `Cesium.Primitive` 或者自定义材质来完成。以下是具体的方法: #### 方法一:使用 `Cesium.Geometry` 和自定义材质 可以创建一条竖直线并应用虚线纹理作为其材质。 ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); // 创建一个几何对象表示垂线 const verticalLineGeometry = new Cesium.Geometry({ attributes: { position: new Cesium.GeometryAttribute({ componentDatatype: Cesium.ComponentDatatype.DOUBLE, componentsPerAttribute: 3, values: new Float64Array([ // 起始位置 (x, y, z) 103.0, 40.0, 0.0, // 结束位置 (x, y, z) 103.0, 40.0, 500000.0 ]) }) }, indices: new Uint32Array([0, 1]), primitiveType: Cesium.PrimitiveType.LINES }); // 定义虚线材质 const dashedMaterial = new Cesium.Material({ fabric: { type: 'Stripe', uniforms: { orientation: Cesium.StripeOrientations.VERTICAL, repeat: 10.0, color: Cesium.Color.WHITE, alternativeColor: Cesium.Color.TRANSPARENT } } }); // 添加 Primitive 到场景中 viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: verticalLineGeometry }), appearance: new Cesium.Appearance({ material: dashedMaterial }) })); // 设置相机视角到目标区域 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(103.0, 40.0, 1000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 } }); ``` 上述代码实现了从地面延伸至指定高度的一条虚线[^1]。其中的关键在于利用了 `Cesium.Material` 的 `Stripe` 类型来生成虚线效果,并将其应用于线条几何体上。 --- #### 方法二:基于 `Polyline` 组件模拟虚线 如果不想手动处理几何体,也可以通过调整 `polyline` 的属性间接实现类似效果。 ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); // 使用 Polyline 来绘制虚线 viewer.entities.add({ polyline: { positions: Cesium.Cartesian3.fromDegreesArrayHeights([ 103.0, 40.0, 0.0, // 地面起点 103.0, 40.0, 500000.0 // 高度终点 ]), width: 2.0, material: new Cesium.PolylineDashMaterialProperty({ dashLength: 8.0, color: Cesium.Color.WHITE }) } }); // 设置相机视角到目标区域 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(103.0, 40.0, 1000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 } }); ``` 此方法更简单易用,适合快速开发需求。注意这里使用了 `PolylineDashMaterialProperty` 来控制虚线样式[^2]。 --- #### 注意事项 - 如果需要动态更新虚线的高度或其他参数,建议封装成函数以便调用。 - 对于复杂场景下的性能优化,推荐优先考虑 `Primitive` 方式而非大量实体叠加。 - 在实际项目中可能还需要额外处理坐标转换等问题以适配不同数据源。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值