网站搜索

javascript - 在 fabricjs 中对填充图片的对象进行透视变换

我们有一些填充了图像源的对象。是否有可能通过调整 Fabric.js 中矩形网格的位置来实现填充图像的透视变换?

我正在尝试在 Fabric.js 中实现类似上图的效果……

答案#1

使用 FabricJS 或其他 2D 画布库无法实现真实的透视失真。

Canvas 的 2D 上下文无法进行透视变换。

大多数画布库,包括 fabricJS,都使用二维上下文。

有一个画布 3D 上下文——W

阅读更多 →

javascript - fabricjs,旋转对象后是否可以获取虚拟矩形的左、上和右位置

在旋转对象之后,是否有可能获取虚拟矩形的左、上和右位置?

答案#1

你正在寻找的是你对象的边界矩形:

getBoundingRect(ignoreVpt) → {Object} 返回对象的边界矩形(左、上、宽、高)的坐标,该矩形意图与画布的坐标轴对齐。

返回值:具有 left、top、width、heigh

阅读更多 →

Rollup TypeScript:在 dist + cjs + es 中的声明

我正在尝试使用 rollup 打包一个带有声明 (d.ts) 文件的 TypeScript 库,并且我想输出 cjs 和 es 版本。

所以我想出了这个 rollup 配置:

const {nodeResolve} = require('@rollup/plugin-node-resolve') const nodeExternals = require('rollup-plugin-node-externals'); const json = require('@rollup/plugin-json'); const commonjs = require('@rollup/plugin-commonjs'); const typescript = require('rollup-plugin-typescript2'); const packagePlugin = require('@mpen/rollup-plugin-package'); const cleanPlugin = require('@mpen/rollup-plugin

阅读更多 →

node.js - 如何配置 TS 以允许从 CJS 导入到 ES 模块(node-fetch & Express)?

我正在尝试在一个项目中运行两个库:fetch-node,它是一个 ES 模块,以及 Express,它是 CommonJS。问题是我必须像这样导入 fetch-node:

import fetch from 'node-fetch';

但是 Express 需要我像这样导入它:

const express = require('express')

阅读更多 →

javascript - 在 typescript 中的 kineticjs 形状

我正在尝试根据以下 kineticjs JavaScript 代码创建一个形状:

var triangle = new Kinetic.Shape({ drawFunc: function(canvas) { var context = canvas.getContext(); context.beginPath(); context.moveTo(200, 50); context.lineTo(420, 80); context.quadraticCurveTo(300, 100, 260, 170); context.closePath(); canvas.fillStroke(this); }, fill: '#00D2FF', stroke: 'black', strokeWidth: 4 });

这是一个示例,可以在以下网址找到:http://www.html5canvastutor

阅读更多 →

javascript - 默认类实例化导致 TypeError(ESM/CJS 互操作)

问题摘要

嗨,

我有一个 TypeScript 项目,我正尝试实例化一个类,该类是另一个包的默认导出。我在使用 ESM 语法编写我的项目,而它所依赖的包有 CJS 输出。我遇到的问题是,在运行时,当流程到达类实例化的那一点时,我收到以下错误 -

new TestClass({ arg1: "Hello, World!" }); ^ TypeError: TestClass is not a constructor

阅读更多 →

在 monorepo 中使用 TypeScript 项目引用构建 cjs 和 esm

我有一个 TypeScript 单体仓库原型设置,并且使用增量构建通过 cjs、yarn 工作区和项目引用运行中:

https://github.com/rosskevin/learn-a/tree/build-cjs-esm

由于 tsc -b 在每个项目中使用默认的 tsconfig.json,而它们是为 cjs 设置的,我想简单地通过命令行传递覆盖项:

yarn tsc -b --outDir lib/esm --module es

阅读更多 →

javascript - 如何点击穿过 fabricjs 对象以选择其下方的对象(不使用 evented 属性)

如何使一个 fabricjs 对象“锁定”,使得:

  1. 它不可选择 (obj.selectable=false)
  2. 允许右键的 'mousedown' 事件(obj.evented 必须为 true)
  3. 没有悬停状态/事件(鼠标悬停时不会检测到此对象或更改光标)
  4. 允许鼠标点击其下的对象(鼠标可以通过它访问对象)

我尝试寻找处理 'evented' 属性的代码,但在源码中找不到。evented 属性确实使对象透明(即可以点击穿过它),但会移除 'mousedown' 事件。

在我的情况下,需要实现一个带有锁定/解锁对象功能的上下文菜单。如果对象已锁定,你仍然需要能够右键点击它以再次显示上下文菜单,从而解锁它。此外,当对象被锁定时,你还需要能够访问并点击它下面的对象。

Fabricjs 3.6.6

编辑: 据我所知,fabric 本身无法开箱实现这一功能,必须编写一些自定义代码来添加此功能,详见:https://github.co

阅读更多 →

angular - 如何在使用 fabricjs 调整文本框大小时防止文本缩放

我刚接触 FabricJs,我的关注点是关于调整文本框大小 - 我有下面的解决方案,它可以垂直和水平调整文本框的大小,但不能同时进行。我一直在尝试找到一个可以同时进行两者而不改变文本大小的解决方案。你能帮我找到解决方法吗?

这是我的 jsfiddle 示例链接:http://jsfiddle.net/vstefani/s7yfu93w/27/

var canvas = new fabric.Canvas('canvas'); canvas.setWidth(500); canvas.setHeight(500); var my

阅读更多 →

ES6 模块 - TypeScript 能同时导入 ESM 和 CJS 依赖吗?

我正在编写一个使用 NPM 安装依赖项的 TypeScript 应用程序:

  • 其中一些依赖通过 CJS 导出
  • 其中一些依赖项通过 ESM 导出

是否有一个 tsconfig.json 配置可以让我透明地使用所有这些依赖?

答案#1

是的,它可以!

例如,这是一个带有 ESM 依赖项(chalk)和 common.js 依赖项(aes-js)的全新 ES 模块项目:

package.json:

阅读更多 →