vue 组件图片 路径
Vue路径识别器 (Vue-path-recognizer)
Path Recognizing component for Vue.
Vue的路径识别组件。
![Path-recognizing-component-for-Vue](https://i-blog.csdnimg.cn/blog_migrate/3d432ebfdd39aef970b6e23200ed7de3.gif)
安装 (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的模型:
![56374696f6e732e706e67](https://i-blog.csdnimg.cn/blog_migrate/1958636d16253504a89b71680053888c.png)
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是一种通用算法,您可以添加任何空闲路径来控制界面/游戏:
![65732e676966](https://i-blog.csdnimg.cn/blog_migrate/e4dff4d4276b59e42c4796a91d5e3905.gif)
参考文献和原始作者 (References & Original Authors)
Didier Brun
迪迪尔·布伦
翻译自: https://vuejsexamples.com/path-recognizing-component-for-vue/
vue 组件图片 路径