vue 组件图片 路径_Vue的路径识别组件

vue 组件图片 路径

Vue路径识别器 (Vue-path-recognizer)

Path Recognizing component for Vue.

Vue的路径识别组件。

安装 (Installation)

npm install vue-path-recognizer --save

基本用法 (Basic usage)

Import the PathRecongizer component. PathRecognizer is a container, it requires a child element to capture mouse moves. PathRecognizer does not draw the moves, for a full drawing example, check the example/ folder of this repo.

导入PathRecongizer组件。 PathRecognizer是一个容器，它需要一个子元素来捕获鼠标移动。 PathRecognizer不会绘制移动，对于完整的绘制示例，请检查此仓库的示例/文件夹。

import PathRecognizer, { PathRecognizerModel } from 'vue-path-recognizer';

export default {
  components: {
    PathRecognizer,
  },
  data() {
    return {
      context: null,
      result: "",
      models: [
        new PathRecognizerModel([7, 1], "A"),
        new PathRecognizerModel([2, 6, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4], "B"),
        new PathRecognizerModel([4, 3, 2, 1, 0], "C"),
      ]
    }
  }
}

Add some path model to the recognizer. Each path is defined by a direction-sequence and an associated data object.

将一些路径模型添加到识别器。 每个路径由方向序列和关联的数据对象定义。

models: [
  new PathRecognizerModel([7, 1], "A"),
  new PathRecognizerModel([2,6,0,1,2,3,4,0,1,2,3,4], "B"),
  new PathRecognizerModel([4,3,2,1,0], "C"),
  new PathRecognizerModel([2,6,7,0,1,2,3,4], "D"),
  new PathRecognizerModel([4,3,2,1,0,4,3,2,1,0], "E")
}

Wrap your sliding template range

包装您的滑动模板范围

<path-recognizer
  :models="models"
  :onGesture="handleGesture"
  :onStartDraw="handleStartDraw"
  :onMovePath="handleMovePath"
>
  <template v-slot:default="props">
    <div 
      @mousedown="props.onMouseDown"
      @mouseup="props.onMouseUp"
    >
    </div>
  </template>
</path-recognizer>

For example, here the model for the letter E :

例如，这里字母E的模型：

Set the models and the onGesture prop on the PathRecognizer component :

在PathRecognizer组件上设置模型和onGesture道具：

<path-recognizer
    :models="models"
    :onGesture="handleGesture"
    :onStartDraw="handleStartDraw"
    :onMovePath="handleMovePath"
  >
  </path-recognizer>

Note that onGesture({datas}) is always invoked at the end of the drawing. If no gesture is recognized, this parametter is null.

请注意，始终在图形末尾调用onGesture({datas})。 如果未识别到任何手势，则此参数为null。

自定义过滤器 (Custom filter)

While adding a model, you can specify a custom filter (third parametter of PathRecognizerModel). The filter callback method, if specified, will let you a last chance to modify / analyze the datas to determine a new score.

添加模型时，您可以指定自定义过滤器(PathRecognizerModel的第三个参数)。 如果指定了过滤器回调方法，则将为您提供最后一次修改/分析数据以确定新分数的机会。

For example, the letter D & P have a similar draw-direction-path, however you can discriminate each one by detecting the position of the last point (up -> it's a P, down -> it's a D). The PathInfos struct transmited to the filter function will help you to determine the new score.

例如，字母D和P具有相似的绘制方向路径，但是您可以通过检测最后一点的位置来区分每个字母(上->它是P，下->这是D)。 传输到过滤器函数的PathInfos结构将帮助您确定新分数。

filter(infos, model){
    let lastPoint
    switch (model.datas){
      case "P":
        lastPoint = [...infos.deltaPoints].pop()
        if (lastPoint.y > infos.boundingBox.top + infos.boundingBox.height * 0.6) return Number.POSITIVE_INFINITY
        return infos.cost
      case "D":
        lastPoint = [...infos.deltaPoints].pop()
        if (lastPoint.y < infos.boundingBox.top + infos.boundingBox.height * 0.6) return Number.POSITIVE_INFINITY
        return infos.cost
   }
}

For a full example, please consult the example folder of this repo.

有关完整示例，请查阅此仓库的示例文件夹。

API (API)

PathRecognizer道具 (PathRecognizer props)

name	type	default	description
sliceCount	Number	8	Resolution of the direction wheel
deltaMove	Number	8	Mouse move threshold (pixels)
costMax	Number	32	Max cost limit to detect a gesture
models	[PathRecognizerModel([Number], Any)]	[]	Models to recognize
onStartDraw	Function()	function	Invoked when the user mouse down the zone
onMovePath	Function([{x:Number, y:Number}])	function	Invoked when the user move his mouse during a record session
onStopDraw	Function()	function	Invoked when the user mouse up the zone
onGesture	Function(datas:Any)	function	Invoked with the datas of the model recognized or null if no gesture is recognized

名称	类型	默认	描述
sliceCount	数	8	方向盘的分辨率
三角移动	数	8	鼠标移动阈值(像素)
costMax	数	32	检测手势的最大费用限制
楷模	[PathRecognizerModel([Number]，Any)]	[]	识别模型
onStartDraw	功能()	功能	当用户将鼠标放在区域上时调用
onMovePath	函数([{x：Number，y：Number}])	功能	当用户在记录会话期间移动鼠标时调用
onStopDraw	功能()	功能	当用户将鼠标移到区域上时调用
手势	功能(数据：任何)	功能	调用已识别模型的数据；如果未识别到手势，则为null

自由路径 (Free path)

In this sample project I've used the Graffiti alphabet for the didactic aspect. However, react-path-recognizer is a generic algorithm, you can add any free path to control an interface / game :

在这个示例项目中，我将Graffiti字母用于教学方面。 但是，react-path-recognizer是一种通用算法，您可以添加任何空闲路径来控制界面/游戏：

参考文献和原始作者 (References & Original Authors)

Didier Brun

迪迪尔·布伦

翻译自: https://vuejsexamples.com/path-recognizing-component-for-vue/

vue 组件图片 路径