Canvas¶
-
class
webix.Canvas(data)¶ Arguments: - data (object) – A configuration object
Canvas component.
External references¶
Code¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | webix.Canvas = webix.proto({
$init:function(container){
this._canvas_labels = [];
this._canvas_series = (!webix.isUndefined(container.series)?container.series:container.name);
this._obj = webix.toNode(container.container||container);
var width = container.width*(window.devicePixelRatio||1);
var height = container.height*(window.devicePixelRatio||1);
var style = container.style||"";
style += ";width:"+container.width+"px;height:"+container.height+"px;";
this._prepareCanvas(container.name, style ,width, height);
},
_prepareCanvas:function(name,style,x,y){
//canvas has the same size as master object
this._canvas = webix.html.create("canvas",{ title:name, width:x, height:y, canvas_id:name, style:(style||"")});
this._obj.appendChild(this._canvas);
//use excanvas in IE
if (!this._canvas.getContext){
if (webix.env.isIE){
webix.require("legacy/excanvas/excanvas.js", true); //sync loading
G_vmlCanvasManager.init_(document);
G_vmlCanvasManager.initElement(this._canvas);
} else //some other not supported browser
webix.assert(this._canvas.getContext,"Canvas is not supported in the browser");
}
return this._canvas;
},
getCanvas:function(context){
var ctx = (this._canvas||this._prepareCanvas(this._contentobj)).getContext(context||"2d");
if(!this._webixDevicePixelRatio){
this._webixDevicePixelRatio = true;
ctx.scale(window.devicePixelRatio||1, window.devicePixelRatio||1);
}
return ctx;
},
_resizeCanvas:function(x, y){
if (this._canvas){
this._canvas.setAttribute("width", x*(window.devicePixelRatio||1));
this._canvas.setAttribute("height", y*(window.devicePixelRatio||1));
this._canvas.style.width = x+"px";
this._canvas.style.height = y+"px";
this._webixDevicePixelRatio = false;
}
},
renderText:function(x,y,text,css,w){
if (!text) return; //ignore empty text
if (w) w = Math.max(w,0);
if (y) y = Math.max(y,0);
var t = webix.html.create("DIV",{
"class":"webix_canvas_text"+(css?(" "+css):""),
"style":"left:"+x+"px; top:"+y+"px;",
"aria-hidden":"true"
},text);
this._obj.appendChild(t);
this._canvas_labels.push(t); //destructor?
if (w)
t.style.width = w+"px";
return t;
},
renderTextAt:function(valign,align, x,y,t,c,w){
var text=this.renderText.call(this,x,y,t,c,w);
if (text){
if (valign){
if(valign == "middle")
text.style.top = parseInt(y-text.offsetHeight/2,10) + "px";
else
text.style.top = y-text.offsetHeight + "px";
}
if (align){
if(align == "left")
text.style.left = x-text.offsetWidth + "px";
else
text.style.left = parseInt(x-text.offsetWidth/2,10) + "px";
}
}
return text;
},
clearCanvas:function(skipMap){
var areas=[], i;
for(i=0; i < this._canvas_labels.length;i++)
this._obj.removeChild(this._canvas_labels[i]);
this._canvas_labels = [];
if (!skipMap&&this._obj._htmlmap){
//areas that correspond this canvas layer
areas = this._getMapAreas();
//removes areas of this canvas
while(areas.length){
areas[0].parentNode.removeChild(areas[0]);
areas.splice(0,1);
}
areas = null;
//removes _htmlmap object if all its child nodes are removed
if(!this._obj._htmlmap.getElementsByTagName("AREA").length){
this._obj._htmlmap.parentNode.removeChild(this._obj._htmlmap);
this._obj._htmlmap = null;
}
}
//FF breaks, when we are using clear canvas and call clearRect without parameters
this.getCanvas().clearRect(0,0,this._canvas.offsetWidth, this._canvas.offsetHeight);
},
toggleCanvas:function(){
this._toggleCanvas(this._canvas.style.display=="none");
},
showCanvas:function(){
this._toggleCanvas(true);
},
hideCanvas:function(){
this._toggleCanvas(false);
},
_toggleCanvas:function(show){
var areas, i;
for(i=0; i < this._canvas_labels.length;i++)
this._canvas_labels[i].style.display = (show?"":"none");
if (this._obj._htmlmap){
areas = this._getMapAreas();
for( i = 0; i < areas.length; i++){
if(show)
areas[i].removeAttribute("disabled");
else
areas[i].setAttribute("disabled","true");
}
}
//FF breaks, when we are using clear canvas and call clearRect without parameters
this._canvas.style.display = (show?"":"none");
},
_getMapAreas:function(){
var res = [], areas, i;
areas = this._obj._htmlmap.getElementsByTagName("AREA");
for(i = 0; i < areas.length; i++){
if(areas[i].getAttribute("userdata") == this._canvas_series){
res.push(areas[i]);
}
}
return res;
}
});
|