You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1 lines
15 KiB

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0c4a65"],{"3c76":function(s,a,t){"use strict";t.r(a);var n=function(){var s=this;s._self._c;return s._m(0)},v=[function(){var s=this,a=s._self._c;return a("div",[a("h1",[s._v("设置基础样式")]),a("p",[s._v("基础样式修改的其实是主题配置,所以会通过"),a("code",[s._v("setThemeConfig")]),s._v("方法设置。")]),a("h2",[s._v("设置背景")]),a("p",[s._v("画布背景可以设置颜色或图片。")]),a("h3",[s._v("设置画布背景颜色")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-attr"},[s._v("backgroundColor")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#A4DD00'")]),s._v("\n})\n")])]),a("h3",[s._v("设置背景图片")]),a("p",[s._v("背景图片还支持设置三个属性:"),a("code",[s._v("图片重复")]),s._v("、"),a("code",[s._v("图片位置")]),s._v("、"),a("code",[s._v("图片大小")]),s._v("。其实就是"),a("code",[s._v("css")]),s._v("的"),a("code",[s._v("background-repeat")]),s._v("、"),a("code",[s._v("background-position")]),s._v("、"),a("code",[s._v("background-size")]),s._v("三个属性。")]),a("p",[s._v("不过导出为图片的时候背景图片的行为和"),a("code",[s._v("css")]),s._v("并不完全一致,因为导出是通过"),a("code",[s._v("canvas")]),s._v("实现的,而"),a("code",[s._v("canvas")]),s._v("并不存在这三个属性,所以是通过有限模拟"),a("code",[s._v("css")]),s._v("这三个属性行为实现的,详情可以阅读文章"),a("a",{attrs:{href:"https://juejin.cn/post/7204854015463538744"}},[s._v("如何在canvas中模拟css的背景图片样式")]),s._v("。")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-attr"},[s._v("backgroundImage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xxx.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("backgroundRepeat")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'no-repeat'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("backgroundPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'center center'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("backgroundSize")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cover'")]),s._v("\n})\n")])]),a("p",[a("code",[s._v("backgroundRepeat")]),s._v("支持设置的值如下:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("[\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'不重复'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'no-repeat'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'重复'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'repeat'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'水平方向重复'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'repeat-x'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'垂直方向重复'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'repeat-y'")]),s._v("\n }\n]\n")])]),a("p",[a("code",[s._v("backgroundPosition")]),s._v("支持设置的值如下:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("[\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'默认'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'0% 0%'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'左上'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'left top'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'左中'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'left center'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'左下'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'left bottom'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'右上'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right top'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'右中'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right center'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'右下'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right bottom'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'中上'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'center top'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'居中'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'center center'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'中下'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'center bottom'")]),s._v("\n }\n]\n")])]),a("p",[a("code",[s._v("backgroundSize")]),s._v("支持设置的值如下:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("[\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'自动'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'auto'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'覆盖'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cover'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'保持'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'contain'")]),s._v("\n }\n]\n")])]),a("h2",[s._v("设置连线样式")]),a("p",[s._v("设置节点间的连线样式,支持:"),a("code",[s._v("颜色")]),s._v("、"),a("code",[s._v("粗细")]),s._v("、"),a("code",[s._v("虚线")]),s._v("、"),a("code",[s._v("风格")]),s._v("。")]),a("p",[s._v("目前支持三种连线风格,分别是:曲线(curve)、直线(straight)、直连(direct),其中曲线只在"),a("code",[s._v("logicalStructure")]),s._v("逻辑结构图和"),a("code",[s._v("mindMap")]),s._v("思维导图两种结构时生效。")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-attr"},[s._v("lineColor")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#009CE0'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("lineWidth")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("lineDasharray")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'15, 10, 5, 10, 15'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("lineStyle")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'curve'")]),s._v("\n})\n")])]),a("h2",[s._v("设置概要的连线样式")]),a("p",[s._v("概要节点前面会有一条弧线,它的颜色和粗细可以修改。")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-attr"},[s._v("generalizationLineColor")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#FA28FF'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("generalizationLineWidth")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n})\n")])]),a("h2",[s._v("设置关联线的样式")]),a("blockquote",[a("p",[s._v("关联线需要使用关联线插件")])]),a("p",[s._v("关联线支持设置颜色和粗细,因为它还可以被激活选中,所以还可以设置激活时的颜色和粗细。")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-attr"},[s._v("associativeLineColor")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#FA28FF'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("associativeLineWidth")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("associativeLineActiveColor")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#9F0500'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("associativeLineActiveWidth")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v("\n})\n")])]),a("h2",[s._v("设置节点边框风格")]),a("p",[s._v("默认节点的边框时封闭图形,不过也提供了一种只有底边边框的风格。")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-attr"},[s._v("nodeUseLineStyle")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n})\n")])]),a("h2",[s._v("设置节点内边距")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-attr"},[s._v("paddingX")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("paddingY")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20")]),s._v("\n})\n")])]),a("h2",[s._v("设置节点内的图片最大的显示宽高")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-attr"},[s._v("imgMaxWidth")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("imgMaxHeight")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v("\n})\n")])]),a("h2",[s._v("设置节点内图标的显示大小")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-attr"},[s._v("iconSize")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(",\n})\n")])]),a("h2",[s._v("设置节点外边距")]),a("p",[s._v("设置节点外边距稍微麻烦一点,需要针对不同层级的节点进行设置。")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig({\n "),a("span",{staticClass:"hljs-comment"},[s._v("// 二级节点样式")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("second")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("marginX")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("marginY")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20")]),s._v("\n },\n "),a("span",{staticClass:"hljs-comment"},[s._v("// 三级及以下节点样式")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("node")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("marginX")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("marginY")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v("\n }\n})\n")])]),a("h2",[s._v("完整示例")]),a("iframe",{staticStyle:{width:"100%",height:"455px",border:"none"},attrs:{src:"https://wanglin2.github.io/playground/#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"}})])}],l={},_=l,i=t("2877"),e=Object(i["a"])(_,n,v,!1,null,null,null);a["default"]=e.exports}}]);