化学绘图和可视化工具：ChemDoodle-CSDN博客

本文链接：https://blog.csdn.net/cuclife/article/details/141160211

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

在这里插入图片描述

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】
6	Shader 编程【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程【配置+应用教程 100+】
9	GIS数字孪生与大模型【应用实战 100+】
10	报表与数字大屏【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

文章目录

在这里插入图片描述

ChemDoodle Web Components (CDWC) 是一套非常强大的化学绘图和可视化工具，可以用于创建各种化学相关的 Web 应用程序。CDWC 包括了绘制分子、反应方程式、3D 分子视图等功能，并且支持多种化学文件格式。

下面我会详细介绍一些核心功能以及如何使用这些功能来构建化学应用程序。

安装和引入 ChemDoodle Web Components

首先，你需要将 ChemDoodle Web Components 的脚本添加到你的 HTML 文件中。你可以从官方网站下载最新版本的 ChemDoodle Web Components，或者直接使用 CDN 链接。

<script src="https://web.chemdoodle.com/latest/ChemDoodleWeb.js"></script>

创建 2D 分子视图

使用 ChemDoodle Web Components 创建一个基本的 2D 分子视图非常简单。以下是一个简单的示例，演示如何加载一个分子并显示在一个 HTML 元素内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChemDoodle Web Components Example</title>
    <script src="https://web.chemdoodle.com/latest/ChemDoodleWeb.js"></script>
</head>
<body>
    <div id="moleculeDiv" style="width:600px;height:600px;"></div>
    <script>
        // 创建一个 2D 分子视图
        var myMolecule = new CDK.Molecule();
        myMolecule.loadMolfile("C[C@H](O)C");

        var myWebComponent = new CDK.Component("moleculeDiv");
        myWebComponent.loadMolecule(myMolecule);

        // 添加工具栏
        myWebComponent.toolbar.show();
    </script>
</body>
</html>

创建 3D 分子视图

ChemDoodle Web Components 同样支持 3D 分子视图。以下是创建一个 3D 分子视图的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChemDoodle Web Components 3D Example</title>
    <script src="https://web.chemdoodle.com/latest/ChemDoodleWeb.js"></script>
</head>
<body>
    <div id="moleculeDiv3D" style="width:600px;height:600px;"></div>
    <script>
        // 创建一个 3D 分子视图
        var myMolecule3D = new CDK.Molecule();
        myMolecule3D.loadMolfile("C[C@H](O)C");

        var myWebComponent3D = new CDK.Component("moleculeDiv3D");
        myWebComponent3D.setRenderingStyle(CDK.RENDERING_STYLES.CPK);
        myWebComponent3D.loadMolecule(myMolecule3D);
        myWebComponent3D.render();

        // 添加工具栏
        myWebComponent3D.toolbar.show();
    </script>
</body>
</html>

绘制反应

ChemDoodle Web Components 还可以用来绘制化学反应。下面是一个简单的例子，展示如何创建和显示一个化学反应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChemDoodle Web Components Reaction Example</title>
    <script src="https://web.chemdoodle.com/latest/ChemDoodleWeb.js"></script>
</head>
<body>
    <div id="reactionDiv" style="width:600px;height:600px;"></div>
    <script>
        // 创建一个化学反应
        var myReaction = new CDK.Reaction();
        var reactant1 = new CDK.Molecule();
        reactant1.loadMolfile("C");
        var product1 = new CDK.Molecule();
        product1.loadMolfile("CO");

        myReaction.addReactant(reactant1);
        myReaction.addProduct(product1);

        var myWebComponent = new CDK.Component("reactionDiv");
        myWebComponent.loadReaction(myReaction);
        myWebComponent.render();

        // 添加工具栏
        myWebComponent.toolbar.show();
    </script>
</body>
</html>