当前位置: 首页 > news >正文

konva.js 工具类

konva.js 工具类

class KonvaCanvas {/*** 初始化画布* @param {String} domId 容器dom id*/constructor(domId) {this.layer = null;this.stage = null;this.scale = 1;this.init(domId);}/*** 聚焦到指定元素* @param {String} elementId 元素dom id*/focusOn(elementId) {if (!this.layer || !this.stage || !elementId) return;var element = this.stage.find("#" + elementId)[0];console.log(element.position());let x = this.stage.width() * 0.5 - element.position().x;let y = this.stage.height() * 0.5 - element.position().y;this.stage.x(x);this.stage.y(y);// this.layer.draw();}/*** 绘制图片* @param {String} url 图片路径* @param {String} id 唯一标识* @param {Number} x 横坐标* @param {Number} y 纵坐标* @param {Number} zoom 缩放比例* @param {Number} rotate 旋转角度*/drawImage(url, id, x = 0, y = 0, zoom = 1.0, rotate = 0) {return new Promise((resolve, reject) => {var img = new Image();img.src = url;const that = this;img.onload = function () {const img_w = img.width * zoom;const img_h = img.height * zoom;var kImage = new Konva.Image({image: img,x: x,y: y,width: img_w,height: img_h,offset: {// offset的设置是使得围绕中心旋转x: img_w / 2,y: img_h / 2,},id: id,});kImage.rotate(rotate);that.layer.add(kImage);// that.layer.draw();console.log("图片加载完成");that.layer.batchDraw(); //重绘resolve(kImage);};});}/*** 更新元素属性信息* @param {String} id 元素id* @param {Object} attr 元素属性 {}*/updateElement(id, attr) {if (!this.layer || !this.stage) return;var shape = this.stage.find("#" + id)[0];shape.setAttrs(attr);this.layer.draw();}/*** 绘制线* @param {Array} points 点位坐标   [x1, y1, x2, y2, x3, y3]* @param {String} id 唯一标识* @param {Number} lineWidth 线宽* @param {String} color 颜色* @returns*/drawLine(points, id, lineWidth = 1, color = "#ffffff") {if (!this.layer) return;var line = new Konva.Line({points: points || [],stroke: color,strokeWidth: lineWidth,lineCap: "round",lineJoin: "round",tension: 0.5,id: id,});this.layer.add(line);}/*** 销毁画布*/destroyed() {if (this.layer) {this.layer.destroyChildren();this.layer.draw();}}// ==========================================  私有方法init(domId) {if (!domId) {return;}const container = document.getElementById(domId);var width = container.clientWidth;var height = container.clientHeight;var stage = new Konva.Stage({container: domId,width: width,height: height,draggable: true,});var layer = new Konva.Layer();stage.add(layer);this.stage = stage;this.layer = layer;this.stage.on("wheel", e => {const direction = e.evt.deltaY > 0 ? -0.1 : 0.1;this.scale = this.scale + direction;this.stage.scaleX(this.scale);this.stage.scaleY(this.scale);this.stage.getPointerPosition();// this.layer.draw();// this.stage.draw();this.layer.batchDraw(); //重绘});}// ==========================================  私有方法 end
}export default KonvaCanvas;

相关文章:

konva.js 工具类

konva.js 工具类 class KonvaCanvas {/*** 初始化画布* param {String} domId 容器dom id*/constructor(domId) {this.layer null;this.stage null;this.scale 1;this.init(domId);}/*** 聚焦到指定元素* param {String} elementId 元素dom id*/focusOn(elementId) {if (!t…...

php未能在vscode识别?

在设置里搜php,找到settings.json,设置你的安装路径即可。 成功...

解读MongoDB官方文档获取mongo7.0版本的安装步骤与基本使用

mongo式一款NOSQL数据库,用于存储非结构化数据,mongo是一种用于存储json的数据数据,可以通过mongo提供的命令解析json获取想要的值。 数据模型 了解关系数据库会很熟悉database,table,row,column的概念,分别是数据库&#xff0c…...

【数据结构|C语言版】顺序表

前言1. 初步认识数据结构2. 线性表3. 顺序表3.1 顺序表的概念3.1 顺序表的分类3.2 动态顺序表的实现 结语 前言 各位小伙伴大家好!小编来给大家讲解一下数据结构中顺序表的相关知识。 1. 初步认识数据结构 【概念】数据结构是计算机存储、组织数据的⽅式。 数据…...

Unity类银河恶魔城学习记录12-17 p139 In game UI源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili UI.cs using UnityEngine;public class UI : MonoBehaviour {[SerializeFie…...

MongoDB学习【一】MongoDB简介和部署

MongoDB简介 MongoDB是一种开源的、面向文档的、分布式的NoSQL数据库系统,由C语言编写而成。它的设计目标是为了适应现代Web应用和大数据处理场景的需求,提供高可用性、横向扩展能力和灵活的数据模型。 主要特点: 文档模型: Mon…...

html 引入vue Element ui 的方式

第一种&#xff1a;使用CDN的方式引入 <!--引入 element-ui 的样式&#xff0c;--> <link rel"stylesheet" href"https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue&#xff0c; 后使用element-ui --> <…...

曾经备受追捧的海景房,为何如今却没人要了?

独家首发 ------------ 全国多地的海景房如威海乳山、惠州大亚湾、北海银滩等多地的海景房如今大跌也难以卖出&#xff0c;与当初各地对海景房的追捧形成了鲜明对比&#xff0c;为何这些海景房变成如此样子&#xff0c;在于现实与宣传存在着很大的区别。 曾几何时面朝大海鸟语花…...

[docker] 镜像部分补充

[docker] 镜像部分补充 这里补充一下比较少用的&#xff0c;关于镜像的内容 检查镜像 ❯ docker images REPOSITORY TAG IMAGE ID CREATED SIZE <none> <none> ca61c1748170 2 hours ago 1.11GB node latest 5212d…...

Android(Kotlin) 委托(by) 封装 SharedPreferences

在 Kotlin 中&#xff0c;委托是一种通过将自身的某个功能交给另一个对象来实现代码重用的技术。通过委托&#xff0c;我们可以将某个属性或方法的实现委托给另一个对象&#xff0c;从而减少重复代码的编写。委托可以用于实现多重继承、代码复用和扩展现有类的功能。 Kotlin 中…...

2022年蓝桥杯省赛软件类C/C++B组----积木画

想借着这一个题回顾一下动态规划问题的基本解法&#xff0c;让解题方法清晰有条理&#xff0c;希望更多的人可以更轻松的理解动态规划&#xff01; 目录 【题目】 【本题解题思路】 【DP模版】 总体方针&#xff1a; 具体解题时的套路&#xff1a; 【题目】 【本题解题思…...

Python数据挖掘项目开发实战:使用朴素贝叶斯进行社会媒体挖掘

注意&#xff1a;本文下载的资源&#xff0c;与以下文章的思路有相同点&#xff0c;也有不同点&#xff0c;最终目标只是让读者从多维度去熟练掌握本知识点。 Python数据挖掘项目开发实战&#xff1a;使用朴素贝叶斯进行社会媒体挖掘 一、项目背景与目标 在社交媒体时代&…...

【DM8】ET SQL性能分析工具

通过统计SQL每个操作符的时间花费&#xff0c;从而定位到有性能问题的操作&#xff0c;指导用户去优化。 开启ET工具 INI参数&#xff1a; ENABLE_MONITOR1 MONITOR_SQL_EXEC1 查看参数 select * FROM v$dm_ini WHERE PARA_NAMEMONITOR_SQL_EXEC;SELECT * FROM v$dm_ini WH…...

001-谷粒商城-微服务剖析

1、架构图 还是很强的&#xff0c;该有的都有 2、微服务模块 SpringCloudAlibaba组件包括 SentinelNacosRocketMQSeata 搭配SpringCloudAlibaba组件 OpenFeignGateWayRibbn gateway使用了SpringWebFlux&#xff0c;前几天研究到&#xff0c;为什么springboot不直接使用Spri…...

vue实现前端打印效果

如图效果所示&#xff08;以下演示代码&#xff09; <template><div><el-button v-print"printObj" type"primary" plain click"handle">{{ text }}</el-button><div style"display: none"><div id…...

android wifi直连 wifip2pmanager

android wifi直连 wifip2pmanager&#xff1b;使用WiFi 直连&#xff0c;然后通过udp进行通讯。 Android WiFi 直连&#xff08;Wi-Fi Direct&#xff0c;也称为Wi-Fi P2P&#xff09;是一种让两台或多台设备通过Wi-Fi技术直接进行点对点连接的技术&#xff0c;无需借助传统的无…...

伸缩应用程序和执行滚动更新

&#x1f4d5;作者简介&#xff1a; 过去日记&#xff0c;致力于Java、GoLang,Rust等多种编程语言&#xff0c;热爱技术&#xff0c;喜欢游戏的博主。 &#x1f4d8;相关专栏Rust初阶教程、go语言基础系列、spring教程等&#xff0c;大家有兴趣的可以看一看 &#x1f4d9;Jav…...

解决WPS右键菜单冗余选项,去除WPS右键菜单选项

问题描述 安装WPS后&#xff0c;右键菜单会多出许多无用的选项&#xff0c;如何去除&#xff1f; 解决方法 按下WindowsS打开搜索栏&#xff0c;搜索配置工具打开 勾选所有的关闭和隐藏选项...

部署ELFK+zookeeper+kafka架构

目录 前言 一、环境部署 二、部署ELFK 1、ELFK ElasticSearch 集群部署 1.1 配置本地hosts文件 1.2 安装 elasticsearch-rpm 包并加载系统服务 1.3 修改 elasticsearch 主配置文件 1.4 创建数据存放路径并授权 1.5 启动elasticsearch是否成功开启 1.6 查看节点信息 …...

ActiveMQ 任意文件上传漏洞复现

一、使用弱口令登陆 ​ 访问 http://ip:8161/admin/ 进入admin登陆页面&#xff0c;使用弱口令登陆&#xff0c;账号密码皆为 admin&#xff0c;登陆成功后&#xff0c;headers中会出现验证信息 ​ 如&#xff1a; Authorization: Basic YWRtaW46YWRtaW4 # 二、利用PUT协议上…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

MySQL 数据库深度剖析:事务、SQL 优化、索引与 Buffer Pool

在当今数据驱动的时代&#xff0c;数据库作为数据存储与管理的核心&#xff0c;其性能与可靠性至关重要。MySQL 作为一款广泛使用的开源数据库&#xff0c;在众多应用场景中发挥着关键作用。在这篇博客中&#xff0c;我将围绕 MySQL 数据库的核心知识展开&#xff0c;涵盖事务及…...

Linux--vsFTP配置篇

一、vsFTP 简介 vsftpd&#xff08;Very Secure FTP Daemon&#xff09;是 Linux 下常用的 FTP 服务程序&#xff0c;具有安全性高、效率高和稳定性好等特点。支持匿名访问、本地用户登录、虚拟用户等多种认证方式&#xff0c;并可灵活控制权限。 二、安装与启动 1. 检查是否已…...

【计算机网络】NAT、代理服务器、内网穿透、内网打洞、局域网中交换机

&#x1f525;个人主页&#x1f525;&#xff1a;孤寂大仙V &#x1f308;收录专栏&#x1f308;&#xff1a;计算机网络 &#x1f339;往期回顾&#x1f339;&#xff1a;【计算机网络】数据链路层——ARP协议 &#x1f516;流水不争&#xff0c;争的是滔滔不息 一、网络地址转…...

人工智能--大型语言模型的存储

好的&#xff0c;我现在需要回答用户关于GGUF文件和safetensors文件后缀的差别的问题。首先&#xff0c;我得先确认这两个文件格式的具体应用场景和它们各自的优缺点。用户可能是在处理大模型时遇到了这两种文件格式&#xff0c;想了解它们的区别以便正确使用。 首先&#xff…...