Cocos Creator 坐标与转换
ccc的坐标系ccc提供了api，在世界坐标和本地坐标之间可以相互转换。12345let postion = node.position; // postion是在父节点中的坐标cc.log(name, 'position (', postion.x.toFixed(2), ',', postion.y.toFixed(2), ')');let worldPos = node.parent.convertToWorldSpaceAR(node.position); // 世界坐标cc.log(name, '世界坐标(', worldPos.x.toFixed(2), ',', worldPos.y.toFixed(2), ')');node.position是本地坐标，也就是在父节点中的坐标。让父节点调用..
更多
Cocos Creator 拖动效果
我们要实现的效果是，按住并拖动一个小物体，物体跟随手指（鼠标）移动。代码DragToAnywhere.ts12345678910111213141516171819202122232425262728293031@ccclassexport default class DragToAnywhere extends cc.Component { @property(cc.Label) label: cc.Label = null; start () { } onEnable() { this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this); this.nod..
更多
protobuf 升级后带来的一些坑
前段时间把公司某项目依赖的 github.com/golang/protobuf 的版本从 v1.3.3 升级到了 v1.4.2，本文记录了升级过程中遇到的一些问题。 Google 对 Go 的 protobuf 库的底层进行了大的改进，新版本的包路径转移到了 google.golang.org/protobuf. 同时，这些改进也被带进了 github.com/golang/protobuf：从 v1.4 版本起，github.com/golang/protobuf 会在 google.golang.org/protobuf 的基础上实现，但会保证接口兼容，这也表明当前依赖 github.com/golang/protobuf 的项目可以直接升级版本，而无需对上层代码进行改动。 然而，新版的 prot..
更多
画一颗圣诞树🎄
JUST FOR FUN初始化新建页面，添加一个 canvas 元素，引入 css, js 文件12345678910111213html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Christmas Treetitle> <link rel="stylesheet" href="style.css" /> head> <body> <canvas i..
更多
盲调试解决 Zebra 打印机吞纸问题的经历
本来我以为，前端的工作内容只需要跟浏览器打交道，最多再做一做客户端和后端；万万没想到，如标题所示，我居然需要解决打印机的问题。奇怪的需求我们有一个画面单的平台，关于这个平台，我之前已经写过几篇文章，这里就不多提了。一天，面单的产品突然把我拉到了一个群里，因为我们的业务 PM（BPM）接到了一个紧急需求：在我们开始跟某个卖家合作时，他们提出：我们在打印面单的时候，必须支持通过一个叫 Zebra 的打印机来打印，否则就不跟我们合作。由于那是一个大卖家，因此这似乎是一个无法拒绝的需求。虽然我们完全没听说过这种打印机，还是硬着头皮上了。经过调查发现，Zebra 打印机与一般的打印机不太一样，它无法通过系统的打印框来打印，甚至不是走的 COM 或 USB 接口，而是监听了一个 TCP 端口来与电脑通讯。发送给打印机..
更多
Slate 介绍分析与实践
Slate 是一个使用 TypeScript 开发富文本编辑器开发框架，诞生于 2016 年。介绍Slate 是一个使用 TypeScript 开发富文本编辑器开发框架，诞生于 2016 年，作者是 Ian Storm Taylor。它吸收了 Quill，Prosemirror，Draft.js 的优点，核心数据模型十分精简，具有高度的可扩展性，最新版本为 v0.60.1。特点插件作为一等公民，能够完全修改编辑器行为数据层和渲染层分离，更新数据触发渲染文档数据类似于 DOM 树，可嵌套具有原子化操作 API，理论上支持协同编辑使用 React 作为渲染层不可变数据结构 Immer架构图源码分析Slate 使用 monorepo 方式管理仓库，packages 目录中有 4 个源码包。slateslate ..
更多
认识 Range 和 Selection 对象
浏览器的 Range 和 Selection 对象前置知识DOM 文档对象模型中总共有 12 种节点类型，常见的有以下几种常量值类型ELEMENT_NODE1元素节点TEXT_NODE3文本节点COMMENT_NODE8注释节点DOCUMENT_NODE9Document 节点DOCUMENT_FRAGMENT_NODE11DocumentFragment 节点https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeTypeRangeRange 对象表示一个范围，有起始点和终止点，是用于管理选择范围的通用对象。每个点都是一个相对于父节点的偏移量（offset），如果父节点是元素节点，则偏移量是子节点的编号。如果父节点是文本节点，则是文本..
更多什么是 peerDependencies
package.json 里面的 peerDependencies 是什么意思前言众所周知 dependencies 是项目的依赖包，devDependencies 项目开发阶段的依赖包，这些依赖包会在 npm install 过程中自动安装。假设项目本身依赖 package A, 但是另一个 package B 同时依赖 package A，为了避免冲突，这时候就需要将 package A 设置为 package B 的peerDependencies。示例假设项目 A 依赖 package B12345{ "dependencies": { "b": "^1.0.0" }}package B 有一个 peerDependencies package c12345{ "peerDepende..
更多我终于知道了补码的意义
本文供初学者学习，供大佬批判。补码背景很久很久以前，当我参加 NOIP（信息学奥林匹克竞赛）的时候，老师是这么讲补码的：int 型数据的最高位是符号位，符号位为 0 就代表这是正数，为 1 就是负数。但是，+0 和 -0 理应是同一个数，但在二进制中却表示成了两个不同的数（以 8 位为例，二进制表示）： 00000000 和 10000000。所以，我们引入了补码，补码就是，对负数而言，符号位不变，其他位取反，然后再加 1。于是， -0 的补码就是 10000000 -> 11111111 -> 00000000 与 +0 一致了。补码的意义其实当时我就该意识到，仅仅为了 0 这一个数便创建了“补码”这个概念，未免太浪费了。我最近看了 CS: APP 这本书，才进一步理解了补码。补码，就是为有..
更多
React 的 7 种代码异味[译]
教你如何更好地写 React。前言原文链接：7 code smells in your React components作者信息：Anton Gunnarsson翻译许可： Agree 正文自从使用 React 后，我见过越来越多可值得优化的点，比如：大量的 propsprops 的不兼容性props 复制为 state返回 JSX 的函数state 的多个状态useState 过多复杂的 useEffect在本文中，我想分享几个技巧，这些技巧将改善你的 React 代码。大量的 props如果需要把大量的 props 传递到一个组件中，那么很有可能 该组件可再进一步拆分。 问题来了，“大量” 具体是多少呢？答案是 看情况。假设你正在开发 一个包含 20 个或更多 props 的组件时，你想再添加一些..
更多