百念成诗-CSDN博客

原创 Fabric.js Object caching(Fabric.js对象缓存)

Fabric.js Object caching(Fabric.js对象缓存)How does it work?(它是如何工作的？)当fabric对象缓存处于活动状态时，在画布上绘制的对象实际上是在另一个较小的屏幕外画布上预先绘制的，与对象像素维度本身一样大。在“render”方法中，通过“drawImage”操作将预绘制的画布复制到主画布上。这意味着在drag-rotate-skew-scale操作期间，对象不会在画布上重新绘制，而只是将其复制的缓存图像绘制在画布上。How can I tweak

2021-04-01 09:57:05 1944

原创 Introduction to Fabric.js/ Part 8 - Clipping with clipPaths(介绍Fabric.js第八部分-剪裁)

Introduction to Fabric.js/ Part 8 - Clipping with clipPathsClipPaths basicsThe new clipPath property(新的clipPath属性)在2.4.0中，我们为所有对象引入了clipPath属性。 ClipPath将替换clipTo:funcion(){}，以实现相同的灵活性，但具有更好的兼容性。ClipPath需要对象缓存。How to use it(如何使用)将您自己的clipPath创建为普通的Fab

2021-03-31 18:31:27 1948

原创 Introduction to Fabric.js/ Part 7 - Subclasses(介绍Fabric.js第七部分-子类)

Subclassing Text class to make a bitmap text(子类话文本类以生成位图) - unfinished本教程是针对stackoveflow问题而创建的，在该问题中，用户需要在fabricJS中使用位图而不是字体的文本对象。该代码示例包含启动子类所需了解的所有内容。当您无法通过其他api（事件，自定义控件）获得所需的功能时，请考虑子类化是一种最后的资源。demo...

2021-03-31 18:29:31 434

原创 Using transformations, Introduction to Fabric.js Part 6(使用变换，介绍Fabric.js第六部分)

Using transformations, Introduction to Fabric.js Part 6理解transformations如何在fabricJS上工作是尽可能顺利地编写应用程序的一个关键方面。Methods and properties related to transformations(与转换有关的方法和属性)如果您计划了解和使用带有自定义代码的fabricJS转换，那么这些是您应该学会使用最多的方法。一般而言，在此页面中，我们将矩阵称为6个数字的数组，这些数组表示平面上的

2021-03-31 18:24:53 980

原创 Zoom and pan, introduction to FabricJS part 5(缩放和平移，介绍Fabric.js第五部分)

Zoom and pan, introduction to FabricJS part 5在上一个系列中，我们讨论了很多主题。从基本的对象操作到动画，事件，过滤器，组和子类。但是仍然有一些非常有趣和有用的事情要讨论！Zoom and panning(缩放和平移)让我们看看如何通过鼠标交互来实现缩放和平移的基本系统。我们将使用鼠标滚轮在画布上放大20倍（2000％），并使用alt +单击动作进行拖动。我们开始连接基本控件：canvas.on('mouse:wheel', function(opt)

2021-03-31 18:23:16 1182 3

原创 Introduction to Fabric.js. Part 4.(介绍Fabric.js第四部分)

Introduction to Fabric.js. Part 4.在上一个系列中，我们讨论了很多主题。从基本的对象操作到动画，事件，过滤器，组和子类。但是仍然有一些非常有趣和有用的事情要讨论！Free drawing如果说有什么功能能让<canvas>在眼前一亮，那一定是它能够很好的支持自由绘图！由于画布只是一个2D位图， Fabric为我们提供了一张纸：可以自由绘画，而且非常自然。只需将Fabric画布的isDrawingMode属性设置为true即可启用免费绘图模式。这立即使在画布

2021-03-31 18:21:47 1017

原创 Introduction to Fabric.js. Part 3(介绍Fabric.js第三部分)

Introduction to Fabric.js. Part 3我们已经覆盖了大多数的基本知识在第一和第二这一系列的组成部分。让我们继续使用更高级的stuf！Groups(组合)我们首先要谈论的是groups。Groups是Fabric最强大的功能之一。它们的确像是听起来的样子—一种将任何Fabric对象分组为单个实体的简单方法。我们为什么要这样做？当然是要将这些对象作为一个单元来使用！还记得如何用鼠标将画布上任意数量的Fabric对象组合在一起，形成一个选择吗？分组后，所有对象都可以一起移动甚至

2021-03-31 18:20:40 1382 4

原创 Introduction to Fabric.js. Part 2(介绍Fabric.js第二部分)

Introduction to Fabric.js. Part 2在本系列的第一部分中，我们只是开始熟悉Fabric.js。我们研究了使用Fabric的原因，对象模型和对象层次结构，Fabric中可用的不同种类的实体-简单的形状，图像和复杂的路径。我们还学习了如何对画布上的Fabric对象执行简单的操作。既然大多数基本知识都结束了，那么让我们开始一些有趣的事情吧！Animation没有动画工具的canvas库是不会受人尊重的。而且Fabric也不例外。由于具有如此强大的对象模型和图形功能，因此如果没

2021-03-31 18:19:34 1989 2

原创 Introduction to Fabric.js. Part 1.(介绍Fabric.js第一部分)

Introduction to Fabric.js: Part 1Introduction to Fabric.js. Part 1.(介绍Fabric.js第一部分)今天，我想向您介绍Fabric.js —一个功能强大的Javascript库，使使用HTML5 canvas的工作变得轻而易举。 Fabric提供了画布缺少的对象模型，以及SVG解析器，交互性层和一整套其他必不可少的工具。这是一个完全开放源代码的项目，已获得麻省理工学院（MIT）的许可，多年来有许多贡献。在发现使用原生canvas AP

2021-03-31 18:18:06 2462

原创 FabricJS gotchas/FabricJS陷阱

FabricJS gotchas这个页面包含了第一次接触fabricJS的人打开的最常见问题的列表。这些缺陷的产生，既有解释不清的原因，也有文档不完善的原因。在这里，我们试图解决共同的问题。Objects are no more selectable - setCoords(对象不再是可选择的-setCoords)Fabric包含两组坐标以快速知道物体在画布上的位置。它们链接到两个对象属性：oCoords和aCoords。当用户与对象交互或结束变换（例如拖动）时，fabricJS会自动更新这些坐标。

2021-03-31 18:15:47 1262

原创 Fabric.js中文文档

Fabric.js中文文档导航说明：1、本系列如果有两个超链接，则第一个是官方文档链接，第二个是中文文档链接，用/分隔，若不存在第二个链接或第二个链接无法跳转则代表没有或还未完成。2、本系列大部分代码demo都是参考官方文档自己实践而成，有些地方与官方文档不一样会有说明，也有少部分没有亲自实现直接使用了官网文档的代码。3、本系列代码使用vue语法，每篇文章的第一个代码片段会有标签和样式部分，其他代码无特殊情况只放部分mounted(){}中的代码或与上文没有重复的核心代码。Vue中使用fabric

2021-03-31 18:12:47 15632 3

原创前端框架-React入门

前端框架学习笔记第十四章 React入门React介绍介绍React是Facebook内部的一个JavaScript类库。React用于创建Web用户交互界面。React不是一个完整的MVC框架，只负责MVC中的V(View)视图层，甚至React不认可MVC开发模式。React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑简单。React引入了虚拟DOM(Virtual DOM)的机制。React引入了组件化的思想，一切皆组件。React使用Facebook专门为其开发的一套语

2020-11-24 23:05:53 246

原创 Vue监听器、计算属性、过滤器和过渡动画

前端框架学习笔记第三章 Vue监听器、计算属性、过滤器和过渡动画监听器Vue提供了watch选择项，这是一个更通用的方法来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有效的。new Vue({ watch:{ //浅监听，参数可省略 value(newV,oldV){ //逻辑 }， //深度监听不建议使用，因为会造成页面卡顿，如果要使用的话，建议转换成简单类型使用。

2020-11-24 23:04:13 300

原创 Vue表单数据绑定、修饰符、生命周期

前端框架学习笔记第二章 Vue表单数据绑定、修饰符、生命周期表单数据绑定所有表单元素都可以使用v-model绑定数据。文本表单中的文本包括文本框和文本域，都可以通过v-model进行数据的双向绑定。<input type="text" v-model='value'><textarea v-model='value' name="" id="" cols="30" rows="10"></textarea>单选钮单选钮中v-model绑定的是value

2020-11-24 23:01:48 195

原创前端框架-Vue入门

前端框架学习笔记第一章 Vue入门节点赋值（复习）非表单元素js：innerHTMLjQuery：html()表单元素js：value()jquery：val()媒体元素js：srcjQuery：attr(‘src’,‘1.jpg’)Vue介绍官网：https://cn.vuejs.orgVue是一款渐进式JavaScript框架，采用自底向上增量开发的设计，只关注视图层，易于上手。Vue核心：数据驱动+组件系统优点：模块友好化易用、灵活、高校SPA(

2020-11-24 22:59:45 163

原创 hexo搭建博客教程(matery主题)

hexo搭建博客教程(matery主题)写在前面这篇教程是我搭建个人博客的路程经历和经验总结，matery主题挺多人用，网上也有各种详细教程，没时间我就不出详细教程了，这里给出其他大佬的教程链接，还有我自己总结的经验。本教程中搭建完博客之后的其他优化可以根据自己的需求选择配置即可，没有顺序。个人博客：百念成诗如果你有前端基础，在个性化定制博客时可能有些效果不满意，可以自己在控制台修改调试，然后在相应的文件中修改。仔细观察框架目录和文件内容，基本都能知道对应的css和js在哪，比如我自己的博客中就修改

2020-11-24 22:58:08 2131

原创包与NPM

Node开发学习笔记包与NPMNPM概述模块：按照CommonJS规范写的js文件。包：包含js文件和其他附带信息的整体。npm：包的管理工具。根据包的名字下载并安装（npmjs.com）。解决了包之间的依赖关系。常用命令安装包npm install <Module Name>#简写npm i <Module Name>如果不指定包名，就会在项目的package.json中寻找相关依赖包并下载。卸载包npm uninstall <Module

2020-11-23 14:58:32 155

原创一文详解js执行上下文、作用域链、闭包、this之间的关系

JavaScript学习笔记一文详解js执行上下文、作用域链、闭包、this之间的关系闭包是js中的一大难点，想要理解闭包，只知道它的特性是不够的，只有知道了它的执行原理才能融汇贯通运用它。这篇文章就通过js执行上下文、作用域链这几个js的重难点知识来理解闭包，以及js中的另一个难点this。本篇篇幅较长，但是讲解详细，如果有基础可以根据目录跳着看。1、执行上下文js中的执行上下文是一个比较抽象的概念，js中变量或函数的执行上下文决定了它们可以访问哪些数据及行为。变量对象：每个上下文都有一个关

2020-11-23 14:54:58 416 1

原创 js逻辑操作符详解

JavaScript学习笔记逻辑操作符js中的逻辑操作符，也称布尔操作符或者逻辑表达式。当用逻辑操作符操作简单的布尔类型值得时候，我们很容易得出结果，但是如果操作数/表达式结果（以下简称为操作数）不是纯布尔类型的值，就没那么简单得出结论了。1、逻辑非（!）先从最简单的逻辑非讲起，它放置在一个单独的操作数之前，作用是将该操作数的布尔值进行取反。它的运算规则是：先将操作数转换为布尔值，然后再对布尔值求反。也就是说不论操作数是什么类型，都会先将其转换成布尔值，js中除了空字符串、null、undefi

2020-11-23 14:52:48 556

原创 js确定数据类型

JavaScript学习笔记js确定数据类型1、typeof适用与简单数据类型let s = "abcd"console.log(typeof s)//stringlet num = 1console.log(typeof num)//numberlet b = trueconsole.log(typeof b)//bolleanlet n = nullconsole.log(typeof n)//objectlet u;console.log(typeof u)//und

2020-11-23 14:51:37 935

原创 JavaScript学习笔记-AJAX数据交互

JavaScript学习笔记AJAX1、传统方法请求服务器传统的web交互是用户触发一个http请求服务，服务器收到之后做出响应，并且返回一个新的的页面，每当服务器处理客户端提交的请求时，客户端处于空闲等待。并且哪怕只是与服务端进行一个简单的交互或请求一个简单的数据，都要返回一个完整的HTML页面，这造成了大量的带宽浪费，以及应用响应非常慢。2、什么是AJAXAJAX即“Asynchronous JavaScript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用

2020-11-23 14:46:50 177

原创 JavaScript中数据在内存中的存储方式

JavaScript中数据在内存中的存储方式1、js数据类型分类简单数据类型：Number、String、Boolean、Undefined、Null复杂数据类型：Object、Array、Function简单数据类型也称基本数据类型，复杂数据类型也称引用数据类型。2、数据结构数据结构是计算机存储、组织数据的方式。这里只列出分类不做详细解释，常用的数据结构有：数组、栈、堆、列表、链表、树、图、散列表。本文中只用到这两种数据结构：栈(后进先出，使用堆的一种方法)、堆(特殊的树形结构)3、简

2020-11-23 14:43:17 2394

原创 JavaScript学习笔记-面向对象编程

JavaScript学习笔记面向对象编程1、面向对象概念1-1、对象基本概念ECMAScript有两种开发模式：函数式：面向过程的开发模式，每个步骤都需要自己完成，注重的是实现过程。面向对象：将对象作为程序的基本单元，将程序分解为数据和操作的集合。面向对象基本概念：类：类是对象的类型模板，将具有同一类属性和方法的对象抽象出来称为一个类。实例：实例时根据类创建的对象，是类的个体表现。但是ECMAScript中没有类的概念，因此它的对象也基于类的语言中的对象有所不同。1-2、对象

2020-11-23 14:40:10 123

原创 Node开发学习笔记-Node.js Web模块

Node开发学习笔记Node.js Web模块什么是Web服务器？Web服务器一般指网站服务器，是指驻留与因特网上某种类型计算机的程序，Web服务器的基本功能，就是提供Web信息浏览服务。它只需要支持HTTP协议、HTML文档格式及URL，与客户端的网络浏览器配合。大多数web服务器都支持服务端的脚本语言php、python、ruby等，并通过脚本语言从数据库获取数据，将结果返回给客户浏览器。目前最主流的web服务器是Apache、Nginx、IIS。Web应用架构Client：客户端，一般

2020-11-23 14:03:47 101

原创 Node开发学习笔记-Node.js文件系统

Node开发学习笔记Node.js文件系统文件系统简介Node.js提供一组类似UNIX标准的文件操作API，Node导入文件系统模块（fs）语法如下：var fs = require('fs')所有的文件系统操作都具有同步的、回调的、以及基于promise的形式。获取文件信息异步获取文件信息语法：fs.stat(path,(err,stats))path：文件路径，如果是相对路径，参照路径不是当前文件，而是控制台node的启动路径。callback：回调函数，带有两个参数（err，

2020-11-23 14:02:23 108

原创 Node开发学习笔记-Node.js基础

Node开发学习笔记Node.js基础Node jsNode js基于google v8引擎，在服务器端支持JavaScript的一种运行环境。Node.js主要用于编写想Web服务器一样的网络应用，这和PHP、Pyhton是类似的，但是Node.js与其他语言最大的不同之处在于，PHP等语言是阻塞的而Node.js是非阻塞的。Node.js是事件驱动的，开发者可以在不使用线程的情况下开发出一个能够承载高并发的服务器。其他服务端语言难以开发高并发应用，即使可以，性能也不尽人意。Node.js正是在这

2020-11-23 13:57:42 144

原创 Node开发学习笔记-第三章 ES6语法三

Node开发学习笔记第三章 ES6语法三ClassJavaScript中生成实例对象的传统方法是通过构造函数和原型对象混合方法，但是这种写法跟传统的面向对象语言（如c++,java）差异很大。ES6提供了更接近传统面向对象编程的语法，引入了Class类的概念。但是它不过是一个语法糖，它的绝大部分功能ES5都可以做到，class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。注意点：类不可重复声明、类定义不会被提升、类中方法不需要function关键字、类中方法见不能加分号。//传统写

2020-09-28 11:26:06 106

原创 Node开发学习笔记-第二章 ES6语法二

Node开发学习笔记第二章 ES6语法二SetSet对象允许存储任何类型的唯一值，无论是原始值或者是对象引用。Set和Map中的特殊值Set对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：+0与-0在存储判断唯一性的时候是恒等的，所以不会同时存在。undefined与undefined是恒等的，所以不会同时存在。NaN与NaN是不恒等的，但是在Set中只能存在一个，不会同时存在。Set类型转换Array转Setvar set = new Set([

2020-09-28 11:24:55 177

原创 Node开发学习笔记-第一章 ES6语法一

Node开发学习笔记第一章 ES6语法一ES5回顾严格模式定义：严格模式是指在严格的条件下运行js代码，在ECMAScript5引入，通过在脚本或函数的头部添加“use strict”来声明。好处：消除语法的不合理、不严谨之处，保证代码的运行安全。提高编译器效率，增加运行速度。为未来新版本的js做铺垫。限制：不允许使用未声明的变量。不允许对变量或函数使用delete操作符。不允许重命名变量。不允许使用八进制。抛弃with语句。不可对只读

2020-09-28 11:23:13 178

原创 JavaScript学习笔记-第十一章事件

JavaScript学习笔记第十一章事件1、事件基础HTML事件是发生在HTML元素上的事情，是可以被JavaScript侦测到的行为。1-1、事件函数当事件被触发时调用的函数。1-2、事件对象当事件发生时候，浏览器会将事件相关信息保存在内置全局对象window.event中（window可以省略），包括事件类型、操作对象、鼠标位置等。//由于事件对象是事件触发时由js底层将实参数据保存在window.event对象中，因此需要在功能函数中加上形参来接收事件对象。document.onc

2020-09-28 10:21:19 165

原创 JavaScript学习笔记-第十章 BOM

JavaScript学习笔记第十章 BOM1、BOM-window对象BOM全称Browser Object Model-浏览器对象模型，提供了很多对象，用于访问浏览器的功能，没有规范，由各个浏览器厂商制定标准，兼容性差。BOM的核心是window：所有浏览器都支持window对象，它表示浏览器窗口。所有js的全局对象、函数及变量均自动成为window对象的成员。全局变量是window对象的属性。全局函数是window对象的方法。HTML DOM的document也是window对象的属

2020-09-28 10:17:50 127

原创 JavaScript学习笔记-第九章 DOM操作

JavaScript学习笔记第九章 DOM操作1、DOMDocument Object Model，文档对象模型，是W3C组织推荐的处理可拓展性语言的标准编程接口。在网页上，组织页面（文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型称为DOM，如标签、文本、属性等。2、节点2-1、节点介绍在加载HTML页面时，web浏览器生成一个树型结构，用来表示页面内部结构，称为DOM树，DOM将这种树型结构解释为由节点组成。整个文档时一个文档节点DOM中的根节点，是文档内其他节点的访

2020-09-28 10:15:43 129

原创 JavaScript学习笔记-第八章 JavaScript数组对象

JavaScript学习笔记第八章 JavaScript数组对象1、数组对象数组：使用单独的变量名来储存一系列的值，数组可以存储任意数据类型的数据，具有长度和下标。2、创建数组字面量方式创建var arr = ['ahb',123,function(){},{},null,undefined,[1,'sd']];构造函数创建var arr1 = new Array();//[]空数组var arr2 = new Array(1,2,3,4);//[1,2,3,4]//注意：如果

2020-09-28 10:10:08 215

原创 Xftp6的安装与使用

准备Xftp6，这里提供了安装包：如果是其他地方下载，尽量从官网下载：Xmanager中文官网。安装（1）安装过程比较简单，打开安装包，下一步。（2）选择接受协议。（3）用户信息自定义。（4）安装位置自定义，不建议在默认的c盘。（5）然后直接安装就行。2、新建会话（1）点击新建会话。（2）自定义输入会话名称，主机一栏输入需要连接的IP地址，用户名及其密码，然后直接连接就行。这里的新建操作与Xshell新建连接差不多：Xshell6安装与使用。连接虚拟机的话，IP地址就是虚拟机的IP

2020-09-02 14:45:18 5658 1

原创 JavaScript学习笔记四-this详解及函数初识

JavaScript学习笔记四第四章 this详解及函数初识1、this在方法中，this表示该方法所属的对象本身。（对象中的函数称为方法）var obj = { name:'张三', fn:function(){ console.log(this); }}obj.fn();//结果是：{name:'张三',fn:function()}，说明这里的this是obj对象本身。如果单独使用，this表示全局对象。console.log(this);//结

2020-08-09 22:53:27 212

原创大前端第二阶段（JavaScript）面试题（1-4章）

大前端第二阶段（JavaScript）面试题（1-4章）大前端第二阶段（JavaScript）面试题（1-4章）第一章 JavaScript初识1、什么是JavaScript？2、JavaScript与ECMAScript的关系？3、变量的命名规则？4、window.onload的作用？第二章 JavaScript数据类型1、js数据类型？2、null和undefined的区别？3、运算符的种类？4、var a = 10；var b = a++；a、b最后的结果是？5、‘==’ 与 ‘ ===’的区别？

2020-08-09 18:14:20 491

空空如也

空空如也