2

Cesium ジオメトリ インスタンスの色を更新しようとしています。現在、コードは JavaScript で動作していますが、dart に変換すると動作しなくなります。色を変更しようとすると、(PerInstanceColorAppearance で) 半透明が false に設定されている場合は黒い円が表示され、半透明が true に設定されている場合は何も表示されません。ダーツの変換に関係があると思いますが、問題がどこにあるのか特定できません。

これは正しく機能する JavaScript コードです。

var primitive;

<script>
    document.getElementById("test").onclick = function() {myFunction()};

    function myFunction() {
        var attributes = primitive.getGeometryInstanceAttributes('circle');
        attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({alpha : 1.0}));
    }
</script>

<script>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;

    var circleInstance = new Cesium.GeometryInstance({
        geometry : new Cesium.CircleGeometry({
            center : Cesium.Cartesian3.fromDegrees(-95.0, 43.0),
            radius : 250000.0,
            vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
        }),
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
        },
        id: 'circle'
    });

    primitive = new Cesium.Primitive({geometryInstances : circleInstance, 
                                     releaseGeometryInstances : false, 
                                     appearance : new Cesium.PerInstanceColorAppearance({
                                                                 translucent : false, 
                                                                 closed : true})});
    scene.primitives.add(primitive);
</script>

これはダーツへの私の変換です:

var testPrimitive;
bool myTest = false;

void drawTestCircle() {
    if(!myTest) {
        var scene = _viewer['scene'];

        var color = new JsObject(context['Cesium']['Color'], [1.0, 0.0, 0.0, 0.5]);
        var colorInstance = context['Cesium']['ColorGeometryInstanceAttribute'].callMethod('fromColor', [color]);

        var vertexFormat = context['Cesium']['PerInstanceColorAppearance']['VERTEX_FORMAT'];
        var center = context['Cesium']['Cartesian3'].callMethod('fromDegrees', [-95.0, 43.0]);
        var geometry = new JsObject(context['Cesium']['CircleGeometry'], 
              [new JsObject.jsify({'center' : center, 
                                   'radius' : 250000.0, 
                                   'vertexFormat' : vertexFormat})]);

        var circleInstance = new JsObject(context['Cesium']['GeometryInstance'], 
               [new JsObject.jsify({'geometry' : geometry, 
                                    'attributes' : new JsObject.jsify({'color' : colorInstance}),
                                    'id' : 'circle'})]);

        var appearance = new JsObject(context['Cesium']['PerInstanceColorAppearance'], 
               [new JsObject.jsify({'translucent' : false, 'closed' : true})]);
        testPrimitive = new JsObject(context['Cesium']['Primitive'], 
               [new JsObject.jsify({'geometryInstances' : circleInstance, 
                                    'releaseGeometryInstances' : true, 
                                    'appearance' : appearance})]);

        scene['primitives'].callMethod('add', [testPrimitive]);
        myTest = true;
    } else {
        var attributes = testPrimitive.callMethod('getGeometryInstanceAttributes', ['circle']);

        var color = context['Cesium']['Color'].callMethod('fromRandom', [new JsObject.jsify({'alpha' : 1.0})]);
        attributes['color'] = context['Cesium']['ColorGeometryInstanceAttribute'].callMethod('toValue', [color]);
    }
}

drawTestCircle は、「テスト」ボタンのクリック時に呼び出されます。私が使用していた Cesium のサンプル コードは、http://cesiumjs.org/2013/11/04/Geometry-and-Appearances/の「インスタンスごとの属性の更新」にあります。最初は、描画された後に testPrimitive にアクセスしようとすることに関係があると思っていましたが、「releaseGeometryInstances」を設定すると操作できるようになると思います。アイデアや提案は大歓迎です。

4

0 に答える 0