yh-picture-bd-marker

1.4.5 • Public • Published

vue-picture-bd-marker

npm i vue-picture-bd-marker

效果图:

关于ui-picture-bd-marker插件的Vue组件封装

github仓库地址:https://github.com/sunshengfei/vue-ui-picture-bd-marker

文档地址:https://vmarker.sagocloud.com/

更新说明

1.4.5


1、支持长图模式,外部可以套div进行overflow,只需要在vue组件设置width和ratio组合值即可

  1. width:auto 容器宽度将会使用原有图像宽度
  2. ratio:0 使用原图像缩放比 2、修复github issues的一些bug 3、外层增加class g-handler-touchable将开启,响应式touch handler外形变化

1.4.3


1、增加@vmarker:onSize="onSize"事件,返回区域大小与位置

1.4.2


1、提升ui-picture-bd-marker最低版本 2、修复readonly属性响应失效问题

v1.3.8

同步更新ui-picture-bd-marker修复的bug

v1.3.7

删除@vmarker:onSelect、@vmarker:onDrawOne事件

<AiPanel
      ref="aiPanel-editor"
      class="ai-observer"
      :ratio="ratio"
      v-bind:uniqueKey="1"
      @vmarker:onAnnoSelected="onAnnoSelected"
      @vmarker:onAnnoAdded="onAnnoAdded"
      @vmarker:onUpdated="onUpdated"
      @vmarker:onReady="onAiPanelReady"
      @vmarker:onImageLoad="onImageLoad"
      v-bind:readOnly="false"
      v-bind:imgUrl="currentImage"
    />

可以通过this.$refs["aiPanel-editor"].getMarker().updateConfig(config)更新配置,vue-marker内部config默认如下

config = {
      options: {
        blurOtherDots: true,
        blurOtherDotsShowTags: true,
        editable: this.readOnly ? false : true,
        trashPositionStart: 1
      },
      onAnnoContextMenu: function(annoData, element, annoContext) {
        // console.log("🦁onAnnoContextMenu🦁 data=", annoData);
        self.$emit("vmarker:onAnnoContextMenu", annoData, element, self.key);
      },
      onAnnoRemoved: function(annoData) {
        // console.log("🦁onAnnoRemoved🦁 data=", annoData);
        self.$emit("vmarker:onAnnoRemoved", annoData, self.key);
        return true;
      },
      onAnnoAdded: function(insertItem, element) {
        // console.log("🦁onAnnoAdded🦁 data=", insertItem);
        self.$emit("vmarker:onAnnoAdded", insertItem, self.key);
      },
      onAnnoChanged: function(newValue, oldValue) {
        // console.log("🦁onAnnoChanged🦁 ", newValue, oldValue);
        self.$emit("vmarker:onAnnoChanged", newValue, oldValue, self.key);
      },
      onAnnoDataFullLoaded: function() {
        // console.log("🦁onAnnoDataFullLoaded🦁 data=", self.key);
        self.$emit("vmarker:onAnnoDataFullLoaded", self.key);
      },
      onAnnoSelected: function(value, element) {
        // console.log("🦁onAnnoSelected🦁 data=", value);
        self.$emit("vmarker:onAnnoSelected", value, element, self.key);
      },
      onUpdated: function(data) {
        self.$emit("vmarker:onUpdated", data, self.key);
      }
    };

内部可配置defaultConfig如下:

const defaultConfig = {
    options: {
        deviceType: 'both',//both | mouse | touch
        blurOtherDots: false,
        blurOtherDotsShowTags: false,
        editable: true,
        showTags: true,
        supportDelKey: false,
        tagLocation: defaultPositions.bottom,//1 2
        trashPositionStart: 0,
        boundReachPercent: 0.01,
        annotationClass: 'annotation',
    },
    onAnnoContextMenu: function (annoData, element, annoContext) { },
    onAnnoRemoved: function (annoData, element) { return true },
    onAnnoAdded: function (insertItem, element) { },
    onAnnoChanged: function (newValue, oldValue) { },
    onAnnoDataFullLoaded: function () { },
    onAnnoSelected: function (value, element) { },
    onUpdated: function () { },
};

v1.3.5

  1. 增加Mobile支持
  2. 修复键盘删除键失效问题

v1.3.0

  1. 重新适配ui-picture-bd-marker@2.0.0
  2. 修复ratio默认不生效问题。(issue#3

v1.2.1

注意:不兼容1.0.x版本

  1. 防止事件名称冲突,更改emit回调事件名称前缀vmarker,如:this.$emit("vmarker:onReady", this.key);
  2. 增加修改config更改后画布自动刷新机制

Package Sidebar

Install

npm i yh-picture-bd-marker

Weekly Downloads

1

Version

1.4.5

License

Apache-2.0 License

Unpacked Size

186 kB

Total Files

7

Last publish

Collaborators

  • page317