How to creat Parameterized Graphic Images

[Former Member]

I wonder if i can create graphical images on the basis of exact measurements like circle, arc, rectanle, curve etc.

sample image is

Is it possible to do this in sapui5

Please guid

regards

Muhammad Sibtain Arain

[Qualiture · Accepted solution]

Sure, I would use SVG and wrap it in a custom UI5 control

[Former Member · Accepted solution]

Dear Robin,

Can you please provide any sample which make parameterized circle or rectangle. I will be verymuch thankful

regards

[Qualiture · Accepted solution]

Something like this?

function drawCircle(x, y, r) {
  var oSvg = document.getElementById(this.getId() + "-svgContainer");
  var oCircle = oSvg.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "circle");
  oCircle.setAttribute("stroke", "#888");
  oCircle.setAttribute("stroke-width", "1");
  oCircle.setAttribute("fill-opacity", "0");
  oCircle.setAttribute("cx", x);
  oCircle.setAttribute("cy", y);
  oCircle.setAttribute("r",  r);
}

where oSvg is a reference to the SVG container you create in the custom control's renderer() method:

...
oRm.renderControl(new sap.ui.core.HTML({
    content: "<svg id='" + oControl.getId() + "-svgContainer' version='1.1' xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'></svg>"
}));
...

[Former Member · Accepted solution]

Dear Robin,

Thank you so much I really appriciate for your efforts. I never created any custom control that's why i need a little help in that also. please put some light on it also.

jQuery.sap.declare("controls.SvgContainerCtrl"), sap.ui.core.Control.extend("controls.SvgContainerCtrl", {
    metadata: {
        properties: {
            width : {type: "int" ,defaultValue: 200 },
            height : {type: "int" ,defaultValue: 150 },
            fillStyle : {type: "string" ,defaultValue: "#fff" },
            strokeStyle : {type: "string" ,defaultValue: "#444" },
            lineWidth : {type: "float" ,defaultValue: 1.5 },
            lineCap : {type: "string" ,defaultValue: "round" },
            penColor : {type: "string" ,defaultValue: "#333" },
        }
    },
    renderer: function(oRm, oControl) {
    oRm.write("<div"); 
  oRm.writeControlData(oControl); 
  oRm.addClass("myCanvasControl");
  oRm.writeClasses();              
  oRm.write(">");
  oRm.write("<canvas height='200' width='200' id='" + oControl.getId() + "-c'></canvas>");
  oRm.write("</div>");
    },
    drawCircle : function(x,y,r,sAngle,eAngle,counterClockWise){
    },
    rectangle : function (x,y, width, height){
    },
i });

I have made this control file kindly check, i am stuck now how to use it in my view and how to draw circle or square, please guide a little bit more

Regards

[Qualiture · Accepted solution]

See this simple example : Plunker

Hope this helps