vue项目中使用paper.js实现首页canvas绘制_vue paper.js

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
相关文章推荐
瘦瘦的风衣 · 怎么把所以的斜线都替换成js | ...· 16 小时前 ·
憨厚的乌冬面 · 【js与jQuery】前端js动态控制文字大 ...· 昨天 ·
傲视众生的佛珠 · Auto.js ...· 昨天 ·
另类的开水瓶 · Node JS fs.readFile() ...· 昨天 ·
发怒的桔子 · js正则表达式添加换行符_js ...· 2 天前 ·
逃跑的面包 · 西岗区政府· 15 小时前 ·
任性的柚子 · [Bug]: Whisky does ...· 3 月前 ·
沉稳的电梯 · Fast wild-card ...· 4 月前 ·
冷冷的上铺 · 美国梦龙Imagine ...· 1 年前 ·
威武的香菇 · 第十一话-你是何人？ - 藏空传 - 包子漫画· 1 年前 ·
<template>
		<canvas id="myCanvas" :width="canvasW" height="canvasH" ref="myCanvas"></canvas>
	</div>
</template>
this.myPaper = new paper.PaperScope()
this.myPaper.setup(this.$refs.myCanvas);
2、绘制元素
 
举例，绘制一个需要处理的提示和方框
 
 感叹号和其圆圈是直接引入的ui给的图片，人工处理和边框是通过自己绘制的，并且点击文字可以出现一个表格。




    
 
//绘制提示框
        drawError(data, index) {
            let that = this
            //绘制提示图标
            let errorBox = new this.myPaper.Raster({//注意用初始化的PaperScope
                source: require("../images/errorBox.png"),
            errorBox.bounds.x = data.x
            errorBox.bounds.y = data.y - 40
            if (data.isError) {
                //人工处理边框
                var rectangle = new this.myPaper.Rectangle({ x: data.x - 20, y: data.y - 73 }, new paper.Size(100, 30));
                var cornerSize = new this.myPaper.Size(6, 6);
                var errorBorder = new this.myPaper.Path.Rectangle(rectangle, cornerSize);
                errorBorder.strokeWidth = 1;
                errorBorder.strokeColor = '#A8BFF1';
                errorBorder.fillColor = '#0F1C3E';
                console.log(errorBorder, 'errorBorder')
                errorBorder.onMouseUp = function () {
                    that.robotData[index].isShow = !that.robotData[index].isShow
                //感叹号
                new this.myPaper.Raster({
                    source: require("../images/error.png"),
                    position: { x: data.x + 28, y: data.y - 13 }
                // 人工处理描述文字
                var stateNameTxt = new this.myPaper.PointText(data.x - 5, data.y - 53);
                stateNameTxt.content = '待人工处理';
                stateNameTxt.fillColor = '#3EE1FF'
                stateNameTxt.fontSize = '14px'
                stateNameTxt.onMouseUp = function () {//点击事件，可以自行编写
                    that.robotData[index].isShow = !that.robotData[index].isShow
其他简单的元素很多都是一样的，甚至都用UI小姐姐给的图片绘制上去。 
其中有一个元素需要进行移动。由于业务性比较强，所以下面代码不完善展示了，只是讲思路。 
想要让一个整体进行移动，于是采用了创建一个Group，将元素都添加到Group中，给Group设置动画onFrame 即可，让动画停止return。 
drawTrain() {
     this.trainData.forEach(item => {
                let group = new this.myPaper.Group()
                let tarinFirst = new this.myPaper.Raster({
                    source: require('../images/train-h.png'),
                    position: { x: item.x, y: item.y + 25 }
                });
                group.addChild(tarinFirst)//添加元素
                let destination = 1//移动速度
                group.onFrame = (event) => {//移动的动画   向左或者向右平移所以只改动了bounds.x
                    if (item.direction == 'left' && group.bounds.x > 80) {//向左移动的
                        group.bounds.x -= destination
                        return
                    } else if (item.direction == 'right' && group.bounds.x < (1200 - 180 * 2 - item.children.length * 150 - 104)) {//向右移动的
                        group.bounds.x += destination
                        return
4、需要注意的
 
1. view.center和bounds的定位区别
 view.center是以中心为基准点，bounds是以左上角为基准
 2. 关于层级问题
 由于本次项目中涉及到某元素要置于另外一个元素的上方，
 解决方案：
 ①创建一个总的this.paper.Layer()，使用insertChild(index，item)将元素插入特定索引处的组或层中，索引大的在上面
 ②创建元素的顺序，后创建的会在先创建的上面。 
由于元素其实不是特别多，个人使用的是方法②。
                                    PaperScript代码在它自己的范围内自动执行，不受全局范围的影响，仍然可以访问所有全局浏览器对象和函数，比如文档或窗口。
默认情况下，paper .js库只将一个对象导出到全局作用域:paper对象。它包含标准库定义的所有类和对象。当使用PaperScript时，用户不需要关心这些，因为在PaperScript代码中，通过使用聪明的范围，所有的对象和函数看起来都是全局的。
PaperScript还提供了项目、视图和鼠标工具对象的自动创建，并简化了这些对象的事件处理程序的安装。
绘制一个线段
                                    Paper.js 中的项目对象通常被称为文档：它是顶级对象，包含场景图中的所有项目。由于文档一词在浏览器上下文中已被使用，因此它被称为 Project。项目允许对应用于所有新创建项目的样式进行操作，允许访问选定的项目，在未来版本（不知道还会不会有）中还将提供在场景图中查询项目的方法，定义特定的要求，以及持久化和加载不同格式（如 SVG 和 PDF）的方法。使用访问当前的项目，可以存在多个项目。可以访问项目下的视图，图层，导入导出svg，或者使用一个Point来命中hitTest()元素。
                                    Paper.js - 一个强大的JavaScript矢量图形库
Paper.js是一个开源的JavaScript矢量图形库，专为Web设计师和开发人员提供易用性和灵活性。通过使用Paper.js，您可以在浏览器中创建复杂的2D图形、动画和交互式应用。
项目介绍
Paper.js的目标是让Web设计人员能够轻松地在JavaScript环境中进行图形设计。它提供了丰富的API和工具，使得开发者可以专注...
                                    要实现机器人3D位置的显示，你需要使用ROS2和Vue3结合开发。首先，在Vue3中创建一个3D场景，你可以使用Three.js库来创建。Three.js是一个用于创建和渲染3D图形的JavaScript库，可以轻松创建3D场景、3D对象、光线等。接下来，在Vue3中使用ROS2提供的roslibjs库，订阅机器人的位置信息，并将其转换为Three.js场景中的3D对象。
                                    　　前一阵子(em。。。这个前挺长了)做了一个表单生成组件和流程图组件。分别使用的是vuedraggable和paperjs。看了一些官方的介绍和源码，然后就直接上手了。
1.vuedraggable
　　比较简单，主要就是将数据和拖动及拖出和拖入事件绑定好就可以了。拖动的时候，会自动生成ghost，移动中换位动画也是动态的。效果图：
　　此外做了预览、数据保存、校验。每个组件都可以自定义限制...
npm i paper@0.9.25
openseadragon.js(官方网站可下载)
openseadragon-paperjs-overlay.js(官方网站可下载)
在main.js 中导入需要的js
import "./assets/openseadragon"
import "./assets/openseadragon-paperjs-overlay"
import Pap...
                                    Paperjs中的几个基本概念
在Paper.js中, 每个项目或者上下文都需要一系列的对象去描述它的状态，例如当前活动的项目、活动视图及有效工具等。这涉及到三个概念，program（项目）、view（视图）、tool（工具）。
program
像 onFrame()、onResize() 这样全局的处理函数（都属于view的类），需要手动挂载在处理对象上。
paper.inst...
                                    您可能没有听说过Paper.js 。 因此，让我们从问题开始：什么是Paper.js？ 它是允许您创建和使用矢量图形的库。 官方网站将其描述为矢量图形脚本的瑞士军刀。 
 尽管图书馆提供了很多东西，但是即使您从未听说过它，也很容易学习。 在本教程中，我将从库的基本知识开始，然后再转到复杂的主题。 
使用PaperScript
 有两种使用库的方法。 您可以使用PaperScript，它是Jav...
                                    侧边抽屉组件treno-ui中的tr-drawer在一定程度一定场景下可以提高用户体验度。
  我们以表格数据查看详情为例，当查看详情时会弹出弹层，弹层中会出现表格数据的详情。并且，当我们点击表格编辑时也会出现此类弹窗。为了良好的客户体验，在一个项目中弹窗的样式大多是一致的。因此，我们可以写一个paper组件来写弹层样式。我所写的主要核心知识点就是slot。
 paper组件代码...
                                    官方网站的tutorial上有一些教程是直接在html里面调用paperJS对自己的canvas进行的操作，不过也可以实现这两者的分离，有一个主的html页面，以及另一个js文件，在js文件中对paperJS进行操作，下面的代码就是一个简单的demo(paper.js的路径啥的自己下，自己找个文件夹放，我是放在名字叫做js的文件夹里，大家对路径这个应该都懂):
index.html
&lt;!DO...