# picture-demo

**Repository Path**: han8901/picture-demo

## Basic Information

- **Project Name**: picture-demo
- **Description**: 静态图片打点，支持动态添加标记，鼠标拖动缩放
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-06-08
- **Last Updated**: 2025-04-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# picture-demo

#### 介绍
静态图片打点，支持动态添加标记，鼠标拖动缩放

#### 软件架构
纯静态页面即可使用


#### 安装教程

```javascript
   var data = [
        //enableEditorMode()可以拖动更换点位
        //disableEditorMode()不允许使用拖动
        //{id:"clickme"},可以给标签添加属性信息
        new Taggd.Tag({x: 200, y: 200}).enableEditorMode(),
        new Taggd.Tag({x: 600, y: 300}).enableEditorMode(),
        new Taggd.Tag({x: 300, y: 400}, '姓名：韩庆涛,所在位置：二楼西侧', {class: "didian"}).disableEditorMode(),
        new Taggd.Tag({x: 400, y: 300}, '蕾姆是最好的女孩').disableEditorMode()
    ]
    //获取图标元素dom
    const image = document.getElementById('my-image');
    const options = {};
    const tags = [];
    //初始化Taggd对象
    var taggd = new Taggd(image, {}, data).enableEditorMode()
    // document.getElementById('clickme').addEventListener('click', function clickme() {
    //     //删除标记点方法（删除所有标记点）
    //     console.log("你打我呀");
    // });
    document.getElementById('addpoint').addEventListener('click', function addRandomTags() {
        //添加标注点方法
        taggd.addTag(createTag())

    });
    document.getElementById('action-delete').addEventListener('click', function deleteTags() {
        //删除标记点方法（删除所有标记点）
        taggd.deleteTags()
    });
    btnGenerateOutput.addEventListener('click', function () {
        //获取所有标注点信息，taggd.getTags()
        console.log(taggd.getTags())
        output.innerHTML = JSON.stringify(taggd.getTags(), null, 2);
    });
    document.getElementById('btngetoneOutput').addEventListener('click', function deleteTags() {
        //获取当个标记点信息，taggd.getTag(1)，参数为index
        output.innerHTML = JSON.stringify(taggd.getTag(1), null, 2);
        console.log(taggd.getTag(1))
        //taggd.getTag(1).hide();
    });
    // taggd.on('*', function (event) { 
    //     console.log(event)
    // })
```

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)