多比图形控件（Web版）教程（三）：Javascript绘图的图元继承结构

淩亂°似流年 2022-01-14 03:39 167阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

## 3.1 图元继承结构 ##

[多比图形控件（Web版）][Web]的自带有20多个图元，例如长方形，正方形，椭圆，图片和google地图等。我们也可以自定义更多图元，以便于复用。

[多比图形控件（Web版）下载>>>][Web 1]

![asp.net/jsp网页图形设计器中的基本图元][asp.net_jsp]

我们首先看一看多比控件自带的图元，以及他们之间的继承关系。

<table> 
 <tbody> 
 <tr> 
 <td> 命名空间 </td> 
 <td> 名称 </td> 
 <td> 父类 </td> 
 </tr> 
 <tr> 
 <td> BaseShapes </td> 
 <td> Shape </td> 
 <td> 所有图元的父类，相当于Java中的Object </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Rectangle&nbsp; </td> 
 <td> BaseShapes.Shape </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Square&nbsp; </td> 
 <td> StandardShapes.Rectangle </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Text&nbsp; </td> 
 <td> StandardShapes.Rectangle </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Circle&nbsp; </td> 
 <td> BaseShapes.Shape </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> DoubleCircle&nbsp; </td> 
 <td> StandardShapes.Circle </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Connector&nbsp; </td> 
 <td> BaseShapes.Shape </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Line&nbsp; </td> 
 <td> StandardShapes.Connector </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Curve&nbsp; </td> 
 <td> StandardShapes.Line </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Image&nbsp; </td> 
 <td> StandardShapes.Rectangle </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Group&nbsp; </td> 
 <td> StandardShapes.Rectangle </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> RightAngledTriangle&nbsp; </td> 
 <td> StandardShapes.Rectangle </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> RoundRectangle&nbsp; </td> 
 <td> StandardShapes.Rectangle </td> 
 </tr> 
 <tr> 
 <td> StandardShapes </td> 
 <td> Ellipse&nbsp; </td> 
 <td> StandardShapes.Rectangle </td> 
 </tr> 
 <tr> 
 <td> Connectors </td> 
 <td> OneDimensionalLine&nbsp; </td> 
 <td> StandardShapes.Line </td> 
 </tr> 
 <tr> 
 <td> Connectors </td> 
 <td> SingleArrow&nbsp; </td> 
 <td> Connectors.OneDimensionalLine </td> 
 </tr> 
 <tr> 
 <td> Connectors </td> 
 <td> DoubleArrow&nbsp; </td> 
 <td> Connectors.SingleArrow </td> 
 </tr> 
 <tr> 
 <td> Connectors </td> 
 <td> BaseTopConnector&nbsp; </td> 
 <td> StandardShapes.Curve </td> 
 </tr> 
 <tr> 
 <td> Connectors </td> 
 <td> SideSideConnector&nbsp; </td> 
 <td> StandardShapes.Curve </td> 
 </tr> 
 <tr> 
 <td> Callouts </td> 
 <td> Callout&nbsp; </td> 
 <td> StandardShapes.Connector </td> 
 </tr> 
 <tr> 
 <td> Callouts </td> 
 <td> Note&nbsp; </td> 
 <td> StandardShapes.Text </td> 
 </tr> 
 <tr> 
 <td> Callouts </td> 
 <td> BigNote&nbsp; </td> 
 <td> Callouts.Note </td> 
 </tr> 
 <tr> 
 <td> GoogleMaps </td> 
 <td> Map&nbsp; </td> 
 <td> StandardShapes.Image </td> 
 </tr> 
 <tr> 
 <td> GoogleMaps </td> 
 <td> Satellite&nbsp; </td> 
 <td> GoogleMaps.Map </td> 
 </tr> 
 </tbody> 
</table>

[![22c0ea479a42454b8aa9c07be0ef18ac636486878136916220.jpg][]][22c0ea479a42454b8aa9c07be0ef18ac636486878136916220.jpg 1]

转载于:https://my.oschina.net/u/3279502/blog/1593309

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/5e66ee20251a47118e8f7e11e618cf4d.png
[Web]: https://www.evget.com/product/3349
[Web 1]: https://www.evget.com/product/3349/download
[asp.net_jsp]: http://www.duobee.com/docimages/p8.png
[22c0ea479a42454b8aa9c07be0ef18ac636486878136916220.jpg]: /images/20220113/26173d5f2b024570b7cecd1332af21c0.png
[22c0ea479a42454b8aa9c07be0ef18ac636486878136916220.jpg 1]: https://www.evget.com/zt/100sj/index.html