水平线在左侧时如何固定文本位置？

如何解决水平线在左侧时如何固定文本位置？

我们将Vue.js与OpenLayers 4.6.5结合使用。该问题如下所示：

它如何工作？用户例如从底部向上绘制第一条线，然后单击以完成第一条线。然后，他画一条水平线，最后单击以完成它。此时，它会打开一个带有文本区域的模式对话框，用户可以输入单行或多行文本。它看起来如下：

当他单击蓝色按钮时，模式对话框关闭，并且文本出现在水平线上方。当水平线在右侧时，一切正常，但当水平线在左侧时，一切都不正常。

代码如下。

样式功能：

getCallOutStyle (feature,title,zIndex) {
  if (title) {
    const styles = []
    const geometry = feature.getGeometry()

    geometry.forEachSegment(function (start,end) {
      styles.push(new Style({
        geometry: new LineString([start,end]),stroke: new Stroke({ color: 'black',width: 1 }),text: new Text({
          text: title.toString(),font: '17px "Roboto",Helvetica Neue,Helvetica,Arial,sans-serif',textAlign: 'left',overflow: true,placement: 'line',textBaseline: 'bottom',width: 1 })
        }),zIndex
      }))
    })

    if (styles.length >= 2) {
      styles[0].text_.setText('')
      styles.splice(styles.length)
    }

    return styles
  }
},

模式对话框：

<template>
  <modal-dialog
    title="Выноска"
    v-model="visible"
    @hide="onHide"
    :backdrop="false"
    ref="modal"
  >
    <form-row>
      <form-group :columns="12" title="Значение" required :hasError="!callOut">
        <text-area
          :cols="1"
          :rows="3"
          v-model="callOut"
          @keyup.enter="onHide('ok')"
          :title="!callOut ? 'Укажите значение' : ''"
          ref="callOut"
        />
      </form-group>
    </form-row>
    <div slot="footer">
      <button class="btn btn-link" type="button" @click="onHide('cancel')">Отмена</button>
      <button class="btn btn-primary" type="button" @click="onHide('ok')" :disabled="!callOut">Подтвердить</button>
    </div>
  </modal-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,callOut: '',closed: false
    }
  },methods: {
    open () {
      this.callOut = ''
      this.visible = true
      this.closed = false
      if (this.visible) {
        this.$nextTick()
          .then(() => {
            this.$refs.callOut.$el.focus()
          })
      }
    },onHide (message) {
      if (message === 'ok') {
        this.$emit('callOutSet',this.callOut)
        this.closed = true
        this.visible = false
      } else if (message === 'cancel') {
        this.$emit('callOutCancel')
        this.closed = true
        this.visible = false
      } else {
        if (!this.closed) {
          this.$emit('callOutCancel')
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>

文本区域组件：

<template lang="pug">
textarea.form-control(
  :value="value"
  :rows="rows"
  :cols="cols"
  :readonly="readonly"
  :title="title"
  :placeholder="placeholder"
  @input="$emit('input',$event.target.value)"
  )
</template>

<script>

export default {
  props: ['placeholder','value','readonly','cols','rows','title']
}
</script>

绘图：

callOut (callOut) {
  if (!callOut) {
    this.callOutDraw.un('drawend',this.onCallOutDrawEnd)
    this.map.removeInteraction(this.callOutDraw)
    this.currentDrawType = null
    return
  }

  const draw = new Draw({
    source: this.vectorLayer.getSource(),type: 'LineString',maxPoints: 3
  })
  this.callOutDraw = draw
  this.map.addInteraction(this.callOutDraw)

  draw.on('drawend',this.onCallOutDrawEnd)
},onCallOutDrawEnd (event) {
  this.callOutFeature = event.feature
  this.$refs.setCallOutDialog.open()
},async onCallOutSet (title) {
  if (!title) {
    this.vectorLayer.getSource().removeFeature(this.callOutFeature)
    return
  }

  this.callOutFeature.set('graphics',true)
  this.callOutFeature.set('movable',false)
  this.callOutFeature.set('style',callOutStyleId)
  this.callOutFeature.set('title',title)
  this.setFeatureStyle(this.callOutFeature)
  await this.customApi.developedDocuments.saveDrawingGraphics(this.currentDocument.id,this.updateGraphicsObjList())
},onCallOutCancel () {
  this.vectorLayer.getSource().removeFeature(this.callOutFeature)
},

问题是如何确定文本位置？

可接受的解决方案是只允许在正确的方向上绘制水平线。