Let diagonal = radius*Math.sin(Math.PI/4) Ĭtx.moveTo(this.width/2-diagonal, this.height/2-diagonal) Ĭtx.lineTo(this.width/2+diagonal, this.height/2+diagonal) Ĭtx.arc(this.width/2, this.height/2, radius, 0, Math.PI * 2, false) Ĭtx.fillText('DDT is toxic!', this.width/2, this.height-5) Let viewer = new ChemDoodle.ViewerCanvas('viewer', 200, 200) We will load a structure of the toxic pesticide, DDT, into the component and then draw a warning on top of it. In this example, we will implement the drawChildExtras() function for a ViewerCanvas. You can learn all about drawing graphics at the following documentation pages: If you have experience with drawing graphics in other toolkits, such as Java Swing, then you will feel right at home with HTML5 programming. Drawing underneath the molecule or specifically changing how molecules are drawn (without using the Styles object), is much more complex and will require you to alter the ChemDoodle Web Components library. This function is called after the molecule has been drawn, so any graphics added will cover the molecule. The function is sent a drawing context parameter that you will use to draw on top of the canvas. The drawChildExtras() function can be associated with any 2D canvas (so no WebGL yet).
We will, however, cover one last abstract Canvas function, drawChildExtras(), which will allow you to draw on top of a canvas. There are more abstract methods in the ChemDoodle Web Components library, and information on them can be found in the API. On the last page, we covered overriding abstract methods to implement Canvas functionality by handling input events.
0 kommentar(er)
