tqsk-draw-sdk
v1.0.7
Published
A react library developed with dumi
Readme
tqsk-draw-sdk
NPM 安装并使用
- NPM 引入
npm i -S tqsk-draw-sdk- 使用
import tqskDrawSdk from 'tqsk-draw-sdk';
// 初始化
const tqskDrawInstance = await tqskDrawSdk.init(
document.getElementById('tqsk-draw'),
);
// 或者
tqskDrawSdk
.init(document.getElementById('tqsk-draw'))
.then(function (tqskDrawInstance) {
console.log(tqskDrawInstance);
});
// tqskDrawInstance获取到后，可用于后续操作浏览器安装并使用
- 浏览器引入
<script src="https://unpkg.com/tqsk-draw-sdk"></script>- 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<script src="https://unpkg.com/tqsk-draw-sdk"></script>
</head>
<body>
<div id="tqsk-draw"></div>
<script>
tqskDrawSdk
.init(document.getElementById('tqsk-draw'), {
width: '100vw', // 默认 100%,
height: '100vh', // 默认 100%,
})
.then(function (tqskDrawInstance) {
// 获取的实例，可用于后续操作
console.log(tqskDrawInstance);
});
</script>
</body>
</html>开发代理
- 浏览器访问的 tqsk-draw 服务地址，代理到 tqsk-draw 服务地址，确保能获取到 tqskDrawInstance
{
"/tqsk-draw": {
"target": "您的tqsk-draw服务地址",
"changeOrigin": true,
"pathRewrite": { "^/tqsk-draw": "" }
}
}部署
- Nginx 配置代理
location ~* /tqsk-draw/(.*)$ {
proxy_pass http://您的tqsk-draw IP地址/$1?$args ;
proxy_set_header Host 您的tqsk-draw服务地址;
proxy_max_temp_file_size 0;
}tqskDrawSdk
| 参数 | 说明 | 类型 | 默认值 | 版本 | | ---- | ---------- | -------------------------------------------------- | ------ | ----- | | init | 初始化实例 | (root, optionsConfig) => Promise | - | 1.0.0 |
- optionsConfig
| 参数 | 说明 | 类型 | 默认值 | 必填 | | -------- | ------------------------ | ------ | --------------------- | ---- | | width | 宽度 | string | 100% | 否 | | height | 高度 | string | 100% | 否 | | src | tqsk-draw 服务地址 | string | /tqsk-draw/index.html | 否 | | loadTime | 加载成功并获取实例的延迟 | number | 200 | 否 |
tqsk-draw 服务地址需要与当前页面部署在同一个域名下，否则会出现跨域问题。可代理/tqsk-draw 到自己应用的域名下
tqskDrawInstance
| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------------- | ------------------------------- | ---------------------------------------------------- | ------ | ----- | | getSmiles | 获取 Smiles 码 | (isExtended = false): Promise | - | 1.0.0 | | getMolfile | 获取 Mol 码 | (): Promise | - | 1.0.0 | | getInchiKey | 获取 InchiKey | (): Promise | - | 1.0.0 | | setMolecule | 设置 Mol 码或 Smiles 码到编辑器 | (structure: string, options?: Object): Promise | - | 1.0.0 | | layout | 内容重新排版 | (): Promise | - | 1.0.0 | | generateImage | 生成图片 | (data: string, options?: Object): Promise | - | 1.0.0 |
- 生成图片
generateImage(data: string, options: {
outputFormat: 'png' | 'svg';
backgroundColor: string;
bondThickness: number;
}): Promise<Blob>