Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在FabricJS中翻译视图时,用户无法在单击对象时选择对象

在FabricJS中翻译视图时,用户无法在单击对象时选择对象
EN

Stack Overflow用户
提问于 2018-10-06 00:03:58
回答 2查看 886关注 0票数 0

请帮我解决这个问题。

  1. 我有一个文字显示在位置:左: 10,顶部: 10。
  2. 使用viewportTransform将viewPort移动到新位置:按X轴100和Y轴100转换
  3. 文本对象正在移动到新位置。

预期:

用户可以通过点击文本(在新位置)来选择文本对象(“hello world”)。

实数:

第一次,用户不能点击文本对象。和目标边界仍然在旧的位置(左: 10,顶部: 10 )。(见附图)

请签入我的演示代码。

我正在使用FabricjsVersion2.4.0这个演示

如何通过这个问题?

谢谢!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var canvasObject = document.getElementById("editorCanvas");
  // set canvas equal size with div
  $(canvasObject).width($("#canvasContainer").width());
  $(canvasObject).height($("#canvasContainer").height());
 
 canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
  });

  canvas.controlsAboveOverlay = true;

  // Add a text to canvas
  var text = new fabric.Text('hello world', { left: 10, top: 10 });
  canvas.add(text);
  
  // Transform View
  canvas.viewportTransform[4] = 100;
  canvas.viewportTransform[5] = 100;
  canvas.requestRenderAll();
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#canvasContainer {
            width: 100%;
            height: 100vh;
            background-color: gray;
        }
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>


<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-06 00:49:10

调用object.setCoords(),它将在更改后设置包围角。并检查什么时候打电话

演示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

canvas.controlsAboveOverlay = true;

// Add a text to canvas
var text = new fabric.Text('hello world', {
  left: 10,
  top: 10
});
canvas.add(text);

// Transform View
canvas.viewportTransform[4] = 100;
canvas.viewportTransform[5] = 100;
setObjectCoords();
canvas.requestRenderAll();

function setObjectCoords(){
  canvas.forEachObject(function(object){
    object.setCoords();
  })
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>


<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

票数 2
EN

Stack Overflow用户

发布于 2021-09-02 00:08:09

不确定这是否仍然是一个问题,但您可以执行以下操作:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let vpt = [...canvas.viewportTransform];
vpt[4] = 100;
vpt[5] = 100;
canvas.setViewportTransform(vpt);

也解决了同样的问题。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52677002

复制
相关文章
Zend FrameWork之Zend_Db_Table笔记
根据Zend_Db_Table操作数据(也就是在models建立一个对应表的模型) 准备条件: course数据表中有cid课程号,自增,主键,cname课程名称,ccredit课程学分 在models建立Course.php编写Course类继承Zend_Db_Table 写表$_name=’course’;表主键$_primary=’cid’; 1.插入记录操作 要在表中插入一行新数据,只需要将列名:数据的关联数组作为参数,调 用insert()方法即可.(zend framework)会自
苦咖啡
2018/05/08
1.2K0
zend framework项目分组(初级版)
Zend_Controller_Front 控制了Zend_Controller系统的整个工作流。它是前端控制器(FrontController)模型的解释。Zend_Controller_Front处理所有由服务器接收的请求并负责把请求派发给动作控制器 Zend_Controller_Request_Abstract (often referred to as the Request Object)描述请求环境和提供设置和读取控制器和动作名字以及任何请求参数的方法。另外它跟踪它所包含的动作是否被Zend_
苦咖啡
2018/05/08
7730
zend framework项目分组(初级版)
Zend FrameWork 配置文件(初级版)
[production] ;命名空间配置以及自动命名空间注册 autoloadernamespaces[] = “Zend_” autoloadernamespaces[] = “Paper_” appnamespace = “Application” ;运行时设置 phpSettings.display_startup_errors = 1 phpSettings.display_errors = 1 phpSettings.DATE.timezone =”Asia/Shanghai”
苦咖啡
2018/05/08
6090
nginx+php-fpm配置zend framework
server { listen 80; server_name 192.168.1.187; root /var/www/html/public; index index.php; #charset utf-8; location ~* \.(js|ico|gif|jpg|png|css|jpeg|swf)$ { access_log off; expires 2d; } location / { if (!-f $request_filename) { rewrite ^(.+)
苦咖啡
2018/05/08
1.2K0
Zend FrameWork程序员来看看
1.php文件格式 只有php代码的文件结尾不允许出现?>结束 缩进要用4个空格而不是用tab 每行代码长度在80~120字符 2.命名约定 类名只允许使用数字字母字符(不建议使用数字),eg;Zen
苦咖啡
2018/05/07
9420
PHP官方框架 Zend Framework 2.1 发布
Zend Framework (简写ZF)是由 Zend 公司支持开发的完全基于 PHP5 的开源PHP开发框架,可用于开发 Web 程序和服务,ZF采用 MVC(Model–View-Controller) 架构模式来分离应用程序中不同的部分方便程序的开发和维护。
魏杰
2022/12/23
4880
PHP官方框架 Zend Framework 2.1 发布
jquery插件与扩展
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统。这好比大公司们争相做平台一样,得平台者得天下。苹果,微软,谷歌等巨头,都有各自的平台及生态圈。
诺浅
2020/08/21
2.3K0
Zend Framework 配置404、500页面
$application->bootstrap() ->run(); 修改项目index.php中代码如下 try { $application->bootstrap() ->run(); } catch (Exception $e) { switch ($e->getCode()) { case 500: { if (!(include_once ‘404.html’))
苦咖啡
2018/05/08
9410
Flutter - 将 Flutter 集成到现有项目(iOS - Framework篇)
用 Flutter 来开发,从来都不可能是新开的一个纯 Flutter 项目,很大一部分都是 老项目接入 Flutter 来混编。
Flutter笔记
2020/06/17
4.4K0
Flutter - 将 Flutter 集成到现有项目(iOS - Framework篇)
jquery---data
elem.data(object);//object为{key:value};
sucl
2019/08/07
4450
The jQuery UI CSS Framework
jQuery UI是 jquery官方推出的配合jquery使用的用户界面组件集合!包含了许多的界面操作功能,如我们常用的表格排序,拖拽,TAB选项卡,滚动条,相册浏 览,日历控件,对话框等 JS插件~~可以很方便的开发用户界面上的功能,使得您的开发工作事半功倍~~不用写繁琐的JS代码。 jQuery UI提供了一个强大的CSS Framework,为用户定义使用jQuery widgets。其中的ThemeRoller更是让你随心所欲地操作设计不同风格的网页界面。 jQuery UI是一套基于jquery
张善友
2018/01/19
2.3K0
Zend Framework自动加载、简单路由配置(Bootstrap.php)
<?php class Bootstrap extends Zend_Application_Bootstrap_Bootstrap { /* * 自动加载 */ protected fun
苦咖啡
2018/05/08
9230
jQuery 插件
​ jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入
梨涡浅笑
2022/05/08
7.1K0
jQuery 插件
jQuery.prop , jQuery.attr ,jQuery.data
jquery.prop 获取匹配的元素中第一个元素特定的属性值,或者是设置多个元素的属性值。
_淡定_
2018/08/24
3.8K0
【JQuery】JQuery入门——JQuery 插件-validation
validate 是 jQuery 插件,及必须在 jQuery 的基础上进行运行。我们将导入 jQuery 库、 validate
陶然同学
2023/02/27
12.3K0
【JQuery】JQuery入门——JQuery 插件-validation
jQuery 插件
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入
清出于兰
2020/10/26
6.9K0
jQuery 插件
jQuery——插件
        简单来说:“jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互
用户10196776
2022/11/22
14.9K0
Flink DataStream API与Data Table API/SQL集成
在定义数据处理管道时,Table API 和 DataStream API 同样重要。
从大数据到人工智能
2022/02/24
4.3K0
JQuery插件
1.页面 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <ul id="ul"> <li>第一行</li> <li>第二行</li> <li>第三行</li> <li>第四行</li> <li>第五行</li> <li>第六行</li> </ul> <ul id="ul2"> <li>第一行</li> <li>第二行</li>
用户1055830
2018/01/18
4K0
jQuery 插件
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。
星辰_大海
2020/10/09
6.7K0
jQuery 插件

相似问题

Webhook XML始终为空

114

XML节点始终为空

20

Xml按钮字段值始终为空。

30

C# XML值始终为空

52

Express JS发送数组始终为空。

22
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文