教你如何DIY布藝相框

切一塊正方形紙板16 x 16 厘米，紙板中間切出一個(gè)窗口 7 × 7 厘米。準(zhǔn)備表布和鋪棉 20 × 20 厘米。

鋪棉中間挖出7 × 7 厘米窗口，表布中間也剪成4個(gè)尖角。

表布把鋪棉和紙板包裹起來(lái)，中間4個(gè)尖角也粘貼好。

中間的窗口和頂部進(jìn)行車縫，其他位置不需要車縫。

制作裝飾相框的布花。更詳細(xì)可以參考【064】折疊玫瑰花靠墊[英文][圖32張編號(hào)064]

http://blog.sina.com.cn/s/blog_9b33c37f0101cuy5.html

玫瑰花裝飾到相框上面。

后面加背板和掛繩，頂部是不車縫的，隨時(shí)可以取放照片，剩余3邊車縫。

棉麻相框配色這個(gè)顏色的玫瑰花很漂亮。

還可以多做幾個(gè)，串起來(lái)。

手工愛(ài)好者，分享一切關(guān)于美好生活的創(chuàng)意和技能，微信有數(shù)千篇生活美文，微信號(hào)：mydiyclub

新浪微博搜索：手工愛(ài)好者網(wǎng)站

文簡(jiǎn)介

最近有工友問(wèn)我前端怎么給圖片做標(biāo)注。使用 Fabric.js 或者 Konva.js 等庫(kù)確實(shí)可以實(shí)現(xiàn)，但多少覺(jué)得有點(diǎn)大炮打蚊的感覺(jué)，好奇有沒(méi)有專門(mén)做圖片標(biāo)注的工具呢？

在網(wǎng)上搜了一下發(fā)現(xiàn) Annotorious 可以實(shí)現(xiàn)這個(gè)功能。Annotorious 提供了圖片注釋和標(biāo)注功能，而且用法很簡(jiǎn)單。

本文分為【快速入門(mén)】和【API講解】?jī)刹糠帧?/p>

【快速入門(mén)】部分包含 Annotorious 的安裝、使用、導(dǎo)入導(dǎo)出的講解。這幾點(diǎn)應(yīng)該是項(xiàng)目中比較核心的流程，給希望快速入門(mén)的工友提供一丟丟幫助。

【API講解】這部分主要講一下我認(rèn)為比較常用的功能。注意：是“我認(rèn)為”。

快速入門(mén)

快速入門(mén)部分會(huì)講解Annotorious 的安裝、使用、導(dǎo)入和導(dǎo)出數(shù)據(jù)功能。

安裝 Annotorious

CDN

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.css">

<!-- 引入js -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.js"></script>

你可以把這兩份文件下載到自己的項(xiàng)目里再引入。

NPM

用以下命令安裝 Annotorious

npm install @recogito/annotorious

然后在項(xiàng)目中引入

import { Annotorious } from '@recogito/annotorious'
import '@recogito/annotorious/dist/annotorious.min.css'

使用 annotorious

把 Annotorious 安裝到項(xiàng)目后就可以使用了。

Annotorious 的用法很簡(jiǎn)單，只需做以下2步：

在html部分插入圖片
初始化 Annotorious，并綁定圖片元素（元素的ID或者元素本身）

CDN 和 NPM 在初始化時(shí)的用法稍微有點(diǎn)不同。

CDN

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image' // 元素ID
})
</script>

使用 CDN 的方式引入 Annotorious，在初始化時(shí)要 Annotorious.init 這樣寫(xiě)。

NPM

<img src="./img.jpg" id="my-image" />

<script>
const anno = new Annotorious({
  image: document.getElementById('my-image') // 元素本身
})
</script>

使用 NPM 的方式引入 Annotorious 在初始化時(shí)需要 new Annotorious 這樣寫(xiě)。

注意：在 Annotorious 初始化代碼最好放在你所使用的框架的頁(yè)面加載完成后的生命周期函數(shù)里！

導(dǎo)出數(shù)據(jù) getAnnotations()

如果你需要將圖片上的標(biāo)注保存到服務(wù)器，就需要把數(shù)據(jù)導(dǎo)出。

所用到的方法是 getAnnotations()。

<button onclick="save()">保存</button>
<img src="./44.jpg" id="img" />

<script>
  let anno = null

  onload = function() {
    anno = Annotorious.init({
      image: 'img'
    })
  }

  function save() {
    let res = anno.getAnnotations()
    console.log(res)
  }
</script>

導(dǎo)入數(shù)據(jù) loadAnnotations(url)

Annotorious 可以通過(guò) loadAnnotations() 方法加載數(shù)據(jù)。

loadAnnotations(url) 支持傳入一個(gè) URL 參數(shù)，這個(gè) URL 所指的是數(shù)據(jù)文件地址。

比如我在本地創(chuàng)建一個(gè) data.json 文件，文件內(nèi)容是使用前面講到的 getAnnotations() 方法導(dǎo)出的數(shù)據(jù)，我的數(shù)據(jù)內(nèi)容如下：

[
  {
    "@context": "http://www.w3.org/ns/anno.jsonld",
    "type": "Annotation",
    "body": [
      {
        "type": "TextualBody",
        "value": "1",
        "purpose": "commenting"
      }
    ],
    "target": {
      "source": "http://127.0.0.1:5500/44.jpg",
      "selector": {
        "type": "FragmentSelector",
        "conformsTo": "http://www.w3.org/TR/media-frags/",
        "value": "xywh=pixel:100,100,500,300"
      }
    },
    "id": "#cabe2e71-b19f-4499-80c6-235882fd50ba"
  }
]

在本地測(cè)試時(shí)，我使用了本地服務(wù)器把 data.json 管理起來(lái)，在瀏覽器可以通過(guò) http://127.0.0.1:5500/data.json 訪問(wèn)到該文件。

然后再使用 loadAnnotations(url) 方法把數(shù)據(jù)渲染出來(lái)即可。

<button onclick="load()">加載</button>
<img src="./44.jpg" id="img" />

<script>
let anno = null

onload = function() {
  anno = Annotorious.init({
    image: 'img'
  })
}

function load() {
  anno.loadAnnotations("http://127.0.0.1:5500/data.json")
}
</script>

點(diǎn)擊加載按鈕后，圖片上就會(huì)出現(xiàn)一個(gè)選框，點(diǎn)擊選框可以看到數(shù)據(jù)已經(jīng)成功加載出來(lái)。

添加數(shù)據(jù) addAnnotation()

但在實(shí)際項(xiàng)目中，后臺(tái)不一定會(huì)給前端返回一個(gè)文件地址，后臺(tái)可能會(huì)直接返回一個(gè)json數(shù)據(jù)。

這時(shí)候如果使用 loadAnnotations() 方法加載 json 數(shù)據(jù)是行不通的，要通過(guò)遍歷讀取數(shù)據(jù)中心的 data 里的數(shù)據(jù)，然后調(diào)用 addAnnotation() 方法將元素添加到頁(yè)面。

我使用 json-server 簡(jiǎn)單的在本地搭建一個(gè)服務(wù)器給前端訪問(wèn)對(duì)應(yīng)的資源，前端用 axios 請(qǐng)求資源。

<button onclick="load()">加載</button>
<img src="./44.jpg" id="img" />

<script>
let anno = null

onload = function() {
  anno = Annotorious.init({
    image: 'img'
  })
}

function load() {
  axios.get('http://localhost:3000/anno')
    .then(res => {
      res.data.data.forEach(item => {
        anno.addAnnotation(item)
      })
  })
}
</script>

很久之前寫(xiě)過(guò)一篇《『前端必備』本地?cái)?shù)據(jù)接口 —— json-server 從入門(mén)到膨脹》文章介紹 json-server 的基礎(chǔ)用法，有興趣的工友可以去瞧瞧。

API講解

這部分主要講一些我關(guān)注到的功能，如果想全面了解 Annotorious 可以查看文檔。

漢化 locale

Annotorious 是根據(jù)瀏覽器的設(shè)置來(lái)確定使用哪種語(yǔ)言。

如果需要修改 Annotorious 使用的語(yǔ)言，可以在初始化時(shí)配置一下 locale 字段。

比如配置簡(jiǎn)體中文可以用 zh-CN，配置繁體中文可以用 zh-TW。

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image',
  locale: 'zh-CN' // 修改語(yǔ)言
})
</script>

自定義提示文本 messages

如果想自定義按鈕或者輸入框的提示文本可以配置 messages 。

<img src="./img.jpg" id="my-image" />

<script>

// 創(chuàng)建一個(gè)包含自定義消息的對(duì)象
var customMessages = {
  "Add a comment...": "評(píng)論評(píng)論",
  "Add a reply...": "回復(fù)兩句",
  "Add tag...": "這是標(biāo)簽啊",
  "Cancel": "取消",
  "Close": "關(guān)閉",
  "Edit": "編輯~",
  "Delete": "刪除?",
  "Ok": "確定"
}

let anno = Annotorious.init({
  image: 'my-image',
  messages: customMessages // 自定義消息內(nèi)容
})
</script>

如果同時(shí)配置了 locale 和 messages ，會(huì)優(yōu)先使用 message 的值。

空注釋 allowEmpty

默認(rèn)情況下，如果框選后沒(méi)輸入標(biāo)簽或者評(píng)論就按確定是不會(huì)保存選框的。

如果想保存空選框，可以將 allowEmpty 設(shè)置為 true 。

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image',
  allowEmpty: true // 允許空注釋
})
</script>

框選輔助線 crosshair

有些鼠標(biāo)指針可能并不是那么標(biāo)準(zhǔn)，會(huì)影響你框選的準(zhǔn)確性。

如果需要非常準(zhǔn)確去框選，可以開(kāi)啟輔助線功能，只需將 crosshair 設(shè)置為 true 即可。

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image',
  crosshair: true // 開(kāi)啟輔助線
})
</script>

只讀 readOnly

如果不打算提供框選、添加和刪除信息的操作給用戶，可以將 readOnly 設(shè)置為 true 。

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image',
  readOnly: true // 只讀模式
})
</script>

禁止編輯 disableEditor

如果只需要畫(huà)框框，不需要寫(xiě)注釋，可以將 disableEditor 和 allowEmpty 同時(shí)設(shè)置為 true。

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image',
  allowEmpty: true, // 允許空注釋
  disableEditor: true // 禁用編輯
})
</script>

為什么要同時(shí)將 allowEmpty 設(shè)為 true ？

因?yàn)槿绻悴辉试S注釋為空的話，當(dāng)你點(diǎn)擊空白處時(shí)選框就會(huì)消失。

禁止選中選框 disableSelect

將 disableSelect 設(shè)置為 true 后，畫(huà)布上的選框就無(wú)法再次選中了。

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image',
  disableSelect: true // 禁止選中選框
})
</script>

雖然還沒(méi)想到有什么引用場(chǎng)景，但還是打算記錄一下。

手柄半徑 handleRadius

箭頭所指的就是手柄。

手柄的默認(rèn)半徑是6。如果需要修改手柄半徑可以設(shè)置 handleRadius 屬性。

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image',
  handleRadius: 20 // 設(shè)置手柄半徑
})
</script>

自定義選框樣式

Annotorious 的選框和編輯器都是可以使用 css 設(shè)置樣式的。

選框部分使用了 SVG ，編輯器部分直接用了 HTML 元素。

對(duì) SVG 不了解的工友可以閱讀《SVG專欄》。

回到 Annotorious ，官方也有給出一個(gè)自定義樣式的案例《Customizing Visual Appearance》。

<style>
  /* 選框 */
  /* 隱藏外部形狀-對(duì)于這種風(fēng)格，我們只需要一個(gè) */
  svg.a9s-annotationlayer .a9s-selection .a9s-outer, 
  svg.a9s-annotationlayer .a9s-annotation .a9s-outer {
    display:none;
  }
  svg.a9s-annotationlayer .a9s-handle .a9s-handle-outer {
    display:none;
  }

  /* 虛線邊框 */
  svg.a9s-annotationlayer .a9s-selection .a9s-inner,
  svg.a9s-annotationlayer .a9s-annotation .a9s-inner  {
    stroke-width:4;
    stroke:white;
    stroke-dasharray:5;
  }

  /* 選中時(shí)的填充色 */
  svg.a9s-annotationlayer .a9s-annotation.editable:hover .a9s-inner {
    fill:transparent;
  }

  /* 手柄顏色 */
  svg.a9s-annotationlayer .a9s-handle .a9s-handle-inner {
    fill:white;
    stroke:white;
  }

  /* 選中選框時(shí)，遮罩層顏色 */
  svg.a9s-annotationlayer .a9s-selection-mask {
    fill:rgba(0, 0, 0, 0.6);
  }

  /* 編輯器 */
  /* 容器 */
  .r6o-editor .r6o-editor-inner {
    box-sizing: border-box;
    padding: 10px;
    border-radius: 6px;
    background: #F4F2DE;
  }

  /* 箭頭 */
  .r6o-editor .r6o-arrow:after {
    background-color: #F4F2DE;
  }

  /* 編輯器 */
  .r6o-widget.comment.editable,
  .r6o-widget.r6o-tag {
    background-color: #EEE3CB;
  }
  .r6o-widget.comment {
    background-color: #D7C0AE;
  }

  .r6o-editor .r6o-editor-inner .r6o-widget {
    border-bottom-color: #7C9D96;
  }

  .r6o-editor .r6o-editor-inner .r6o-widget.r6o-tag {
    border-bottom: none;
  }

  /* 按鈕 */
  .r6o-editor .r6o-btn {
    border-radius: 100px;
    background-color: #7C9D96;
    border-color: #7C9D96;
    color: #fff;
  }

  /* 線框按鈕 */
  .r6o-editor .r6o-btn.outline {
    color: #7C9D96;
    background-color: transparent;
  }
</style>

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image',
  locale: 'zh-CN' // 修改語(yǔ)言
})
</script>

上面這份代碼選框的樣式是從 Annotorious 官網(wǎng)教程搬過(guò)來(lái)的。

編輯器的樣式我隨便配了一下，工友們也可以打開(kāi)瀏覽器控制臺(tái)看 Elements 面板的 HTML 代碼，根據(jù)結(jié)構(gòu)去修改樣式即可。

篩選功能

輸入時(shí)需要快速添加預(yù)選項(xiàng)時(shí)，可以這樣配置：

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image',
  widgets: [
    'COMMENT',
    { widget: 'TAG', vocabulary: [ '雷猴', '鯊魚(yú)辣椒', '蝎子萊萊'] }
  ]
})
</script>

多邊形選框

使用 setDrawingTool(toolName) 方法可以設(shè)置不同的繪制工具。

如果需要講選框設(shè)置成多邊形，可以傳入 'polygon'。

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image'
})

anno.setDrawingTool("polygon")
</script>

想要知道當(dāng)前有哪些繪圖工具，可以使用 anno.listDrawingTools() 方法查看

<img src="./img.jpg" id="my-image" />

<script>
let anno = Annotorious.init({
  image: 'my-image'
})

const toolNames = anno.listDrawingTools()
console.log(toolNames)
</script>

其他

除了上面介紹到的 API 外，Annotorious 還有很多玩法的，比如刪除指定注釋、清空所有注釋等。

詳情請(qǐng)看《annotorious API文檔》

https://annotorious.github.io/api-docs/annotorious/

插件

Annotorious 也有一些好玩的插件，有興趣的可以看看《Annotorious 插件推薦》。

https://annotorious.github.io/plugins/

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了

在線咨詢

上一篇：html亂碼-解決gb2312編碼導(dǎo)致亂碼問(wèn)題
下一篇：Qt編寫(xiě)自定義控件-光暈時(shí)鐘

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商