init

src/views/custom-query/topo/utils/anchor/draw_mark.js

@@ -0,0 +1,56 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: 画锚点
+ */
+
+ import theme from '@/views/custom-query/topo/top/theme'
+export default function(cfg, group) {
+  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  let { anchorPoints, width, height, id } = cfg
+  if (anchorPoints && anchorPoints.length) {
+    for (let i = 0, len = anchorPoints.length; i < len; i++) {
+      let [x, y] = anchorPoints[i]
+      // 计算Marker中心点坐标
+      let anchorX = x * width
+      let anchorY = y * height
+      // 添加锚点背景
+      let anchorBgShape = group.addShape('marker', {
+        id: id + '_anchor_bg_' + i,
+        attrs: {
+          name: 'anchorBg',
+          x: anchorX,
+          y: anchorY,
+          // 锚点默认样式
+          ...themeStyle.anchorBgStyle.default
+        },
+        draggable: false,
+        name: 'markerBg-shape'
+      })
+      // 添加锚点Marker形状
+      let anchorShape = group.addShape('marker', {
+        id: id + '_anchor_' + i,
+        attrs: {
+          name: 'anchor',
+          x: anchorX,
+          y: anchorY,
+          // 锚点默认样式
+          ...themeStyle.anchorStyle.default
+        },
+        draggable: false,
+        name: 'marker-shape'
+      })
+
+      anchorShape.on('mouseenter', function() {
+        anchorBgShape.attr({
+          ...themeStyle.anchorBgStyle.active
+        })
+      })
+      anchorShape.on('mouseleave', function() {
+        anchorBgShape.attr({
+          ...themeStyle.anchorBgStyle.inactive
+        })
+      })
+    }
+  }
+}

src/views/custom-query/topo/utils/anchor/index.js

@@ -0,0 +1,13 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: anchor
+ */
+
+import setState from './set-state'
+import drawMark from './draw_mark'
+
+export default {
+  setState,
+  drawMark,
+}

src/views/custom-query/topo/utils/anchor/set-state.js

@@ -0,0 +1,25 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: set anchor state
+ */
+import theme from '@/views/custom-query/topo/top/theme'
+
+export default function (name, value, item) {
+  const themeStyle = theme.defaultStyle
+  if (name === 'hover') {
+    let group = item.getContainer()
+    let children = group.get('children')
+    for (let i = 0, len = children.length; i < len; i++) {
+      let child = children[i]
+      // 处理锚点状态
+      if (child.attrs.name === 'anchorBg') {
+        if (value) {
+          child.attr(themeStyle.anchorStyle.hover)
+        } else {
+          child.attr(themeStyle.anchorStyle.unhover)
+        }
+      }
+    }
+  }
+}

src/views/custom-query/topo/utils/anchor/update.js

@@ -0,0 +1,31 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: update anchor
+ */
+
+export default function(cfg, group) {
+  let { anchorPoints, width, height, id } = cfg
+  if (anchorPoints && anchorPoints.length) {
+    for (let i = 0, len = anchorPoints.length; i < len; i++) {
+      let [x, y] = anchorPoints[i]
+      // 计算Marker中心点坐标
+      let originX = -width / 2
+      let originY = -height / 2
+      let anchorX = x * width + originX
+      let anchorY = y * height + originY
+      // 锚点背景
+      let anchorBgShape = group.findById(id + '_anchor_bg_' + i)
+      // 锚点
+      let anchorShape = group.findById(id + '_anchor_' + i)
+      anchorBgShape.attr({
+        x: anchorX,
+        y: anchorY
+      })
+      anchorShape.attr({
+        x: anchorX,
+        y: anchorY
+      })
+    }
+  }
+}