RectangularRangeIndicator format like triangular using dojo

问题

I'm trying to add an indicator to my vertical gauge but the format of the indicator is like a triangle, but I want it a large line.

This is JSFIDDLE example.

The code :

 require(['dojo/parser', 'dojox/dgauges/components/default/VerticalLinearGauge','dojox/dgauges/RectangularRangeIndicator', 'dojo/domReady!'], function (parser, VerticalLinearGauge) {
    parser.parse();
    var ri = new dojox.dgauges.RectangularRangeIndicator();
    ri.set("start",0 );
    ri.set("value", 30);
    ri.set("startThickness",100);
    ri.set("endThickness",100);
    gauge.getElement("scale").addIndicator("ri", ri, false);    
});

回答1:

This is a bug, it will be fixed in next releases (1.8.x and 1.9).

See https://github.com/dmandrioli/dgauges/issues/15

As a workaround, you can redefine the bad method like this:

myRangeIndicator._defaultVerticalShapeFunc = 
   function(indicator, group, scale, startX, 
            startY, endPosition, startThickness, endThickness, 
            fill, stroke){ ... }

See this workaround in action at http://jsfiddle.net/BFPuL/5/

回答2:

I think that the properties are startThickness and endThickness (no "stroke" at the end). However, I still don't get one solid line when setting these properties to equal values like one would expect. It seems as though something odd (perhaps a bug) is happening with the way that the startThickness property is handled.

This problem has me interested, so I'll try to set aside some time later to dig into the source to see what the real issue is, but for now I can offer you a dirty workaround. The RectangularRangeIndicator is drawn using the dojox/gfx module, and the outline of the indicator drawn is controlled by the stroke property. So, if you want, you can do something like:

var ri = new dojox.dgauges.RectangularRangeIndicator();
ri.set("start",0 );
ri.set("value", 30);
ri.set("startThickness", 0);
ri.set("endThickness", 0);
ri.set("stroke", {color: "red", width: 2.5});
ri.set("paddingLeft", 7); // Default is 10, set this to whatever works for you.

This will appear to draw straight line (which is really the border of an extremely thin shape). Check out how it looks in a real example. Again, I understand that this is not the best solution since it is more of a dirty trick, but it is a way around what appears to be a bug in the code that renders a range indicator.

来源：https://stackoverflow.com/questions/15748680/rectangularrangeindicator-format-like-triangular-using-dojo

标签

javascript

jquery

css

dojo