- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Konva 在网页上创建一个区域。我为我的矩形创建一个 DragBoundFunc 函数,检查 pos.x 和 pos.y 以及 Canvas 和矩形的宽度,这工作正常 - 矩形仅在拖动时按照我想要的方式保留在该区域中。
当我将矩形旋转 90 度时,我的问题出现了。现在,当我检查 getClientRect().width 和 getClientRect().height 时,宽度小于高度,这是预期的,但它现在不会一直拖动到 Canvas 的末尾,除非我检测到旋转结束并更改形状 offsetY值设置为 65,然后就可以正常工作了。
旋转后更改 offsetY 和 offsetX 是解决此问题的正确方法吗?如果是,我如何计算将它们设置为什么?
dragBoundFunc: function(pos) {
var iw = 600 - (my_shape.getClientRect().width);
var ih = 400 - my_shape.getClientRect().height;
var newX = pos.x > iw ? iw : pos.x;
var newY = pos.y > ih ? ih : pos.y;
return {
x: newX > 0 ? newX : 0,
y: newY > 0 ? newY : 0
};
}
最佳答案
这是一个可行的解决方案。请注意,这仅适用于 0、90、180 和 270 度或倍数的固定旋转。 “任意 Angular 旋转”的解决方案;需要三 Angular 或矩阵数学来计算点的旋转值等。
/*
This is the drag bounds func
*/
function theDragFunc(pos) {
var thisRect = {x: this.x(), y: this.y(), width: this.width(), height: this.height()};
// copy the boundary rect into a testRect which defines the extent of the dragbounds
// without accounting for the width and height of dragging rectangle.
// This is changed below depending on rotation.
var testRect={
left: boundary.x,
top: boundary.y,
right: boundary.x + boundary.width,
bottom: boundary.y + boundary.height
};
// the userRotation value is calculated in the rotation button onclick
// to be one of 0, 90, 180, 270
switch (userRotation){
case 0: // for 0 degrees compute as per a normal bounds rect
testRect.right = testRect.right - thisRect.width;
testRect.bottom = testRect.bottom - thisRect.height;
break;
case 90: // for 90 degs we have to modify the test boundary left and bottom
testRect.left = testRect.left + thisRect.height;
testRect.bottom = testRect.bottom - thisRect.width;
break;
case 180: // for 180 degs we have to modify the test boundary left and top
testRect.left = testRect.left + thisRect.width;
testRect.top = testRect.top + thisRect.height;
break;
case 270: // for 270 degs we have to modify the test boundary right and top
testRect.right = testRect.right - thisRect.height;
testRect.top = testRect.top + thisRect.width;
break;
}
// get new pos as: if pos inside bounday ranges then use it, otherwise user boundary
// left edge check
var newX = (pos.x < testRect.left ? testRect.left : pos.x);
// right edge check
newX = (newX > testRect.right ? testRect.right : newX);
// top edge check
var newY = (pos.y < testRect.top ? testRect.top : pos.y);
// bottom edge check
newY = (newY > testRect.bottom ? testRect.bottom : newY);
// return the point we calculated
return {
x: newX,
y: newY
}
}
// From here on is just the canvas setup etc.
// set ub the main rect - the one we drag and rotate
var target = {x: 70, y: 70, width: 70, height: 40};
// set ub the boundary rect - used in the rectfunc later
var boundary = {x: 20, y: 20, width: 460, height: 160};
// Set up the stage
var s1 = new Konva.Stage({container: 'container1', width: 500, height: 200});
// add a layer.
var layer1 = new Konva.Layer({draggable: false});
s1.add(layer1);
// show the extent of the boundary
var funcRect = new Konva.Rect({
x:boundary.x,
y: boundary.y,
width: boundary.width,
height: boundary.height,
stroke: 'red'})
layer1.add(funcRect)
// Make some easy-to-grok values for the boundary func.
boundary.minX = boundary.x;
boundary.maxX = boundary.x + boundary.width;
boundary.minY = boundary.y;
boundary.maxY = boundary.y + boundary.height;
// show the target rect
var targetRect = new Konva.Rect({
x:target.x,
y: target.y,
width: target.width,
height: target.height,
stroke: 'green',
draggable: true,
// Apply a linear graient fill to give a sense of rotation.
fillLinearGradientStartPoint: { x : -50, y : -50},
fillLinearGradientEndPoint: { x : 50, y : 50},
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
dragBoundFunc: theDragFunc // the function is at the bottom top of the code
})
layer1.add(targetRect)
// Draw the stage
s1.draw();
var userRotation = 0;
$('#btnRotate').on('click', function(e){
targetRect.rotate(90)
s1.draw();
var rectRotation = targetRect.rotation();
// user can rotate > 360 so we will nomalise the rotation down to range 0 - 270
userRotation = (rectRotation / 90);
userRotation = (userRotation % 4) * 90;
$('#info').html("Rect rotation " + rectRotation + " same as " + userRotation);
})
p
{
padding: 4px;
}
#container1
{
display: inline-block;
width: 500px;
height: 200px;
background-color: silver;
overflow: hidden;
}
#pallette
{
height: 52px; width: 500px;
border: 1px solid #666;
margin-bottom: 10px;
z-index: 10;
}
.draggable
{
width:50px;
height: 50px;
display: inline-block;
border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<p>Drag bounds function on rotated rect. Red rectangle is the extent of the bounds function. Drag the rect to the boundary and notice it is captured. Now click to rotate by 90%. A simple rect-based dragFunc would fail because the origin of the rect is not top-right. The solution function solves this.
</p>
<p>
<button id='btnRotate'>Rotate by +90 degrees</button> <span id='info'>0</span> degrees.
</p>
<div id='container1'></div>
关于javascript - Konva - 使用旋转并保持在界限内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48597795/
我的应用程序包含两部分:网络部分和 GUI。它的工作方式有点像浏览器 - 用户从服务器请求一些信息,服务器发回一些代表某些 View 的数据,然后 GUI 显示它。 现在我已经将网络部分实现为一项服务
给定表达式字符串exp,编写程序检查exp中“{”、“}”、“(”、“)”、“[”、“]的对和顺序是否正确。 package main import ( "fmt" stack "gi
我想要一个简单的脚本在后台保持运行。目前看起来像这样: import keyboard while True: keyboard.wait('q') keyboard.send('ct
我维护着许多 RedHat Enterprise Linux(7 台和 8 台)服务器(>100 台),其中包含不同的应用程序。为了保持理智,我当然会使用 Ansible 等工具,更重要的是,公共(p
我有一个 winforms 应用程序,它在网络服务请求期间被锁定 我已经尝试使用 doEvents 来保持应用程序解锁,但它仍然不够响应, 我怎样才能绕过这个锁定,让应用程序始终响应? 最佳答案 最好
我正在努力在我的项目中获得并保持领先的 0。以下是当前相关的代码: Dim jobNum As String jobNum = Left(r1.Cells(1, 1), 6) r2.Cells(1
我正在尝试在我的 Canvas 中定位元素相对于我的背景。 窗口被重新调整大小,保持纵横比。 背景随着窗口大小而拉伸(stretch)。 问题是一旦重新调整窗口大小,元素位置就会不正确。如果窗口的大小
一直在玩弄 Hibernate 和 PostgreSQL,试图让它按预期工作。 但是由于某种原因,当我尝试将具有@OneToMany 关系的对象与集合中的多个项目保持一致时,除了第一个项目之外,所有项
我想将某些东西提交到 github 存储库,但我(显然)没有任何权利这样做。我对那个 repo 做了一个分支,提交了我的更改并提交了一个 pull-request。 现在,问题是过了一段时间其他人已经
这是一个初学者问题,我仍在考虑“在 OOP 中”,所以如果我错过了手册中的答案或者答案很明显,我深表歉意。 假设我们有一个抽象类型, abstract type My_Abstract_type en
我们正在开展的一些项目在 jQuery 1.4.2 或更早版本中有着深厚的根基,介于缺乏最新版本的性能优势(或语法糖)、使用现已弃用的方法的耻辱以及部署一个积极维护的库的 3 年以上旧版本,升级现在迫
我看到在FMDB 2.0中,作者为线程添加了FMDatabaseQueue。例子是: // First, make your queue. FMDatabaseQueue *queue = [FMDa
我在 NSScrollView 中有一个 NSTableView。 NSTableView 的内容是通过绑定(bind)到 NSArrayController 来提供的,而 NSArrayContro
我在 TreeView 上有一个节点,我手动填充该节点并希望保持排序。通过用户交互,TreeViewItem 上的标题可能会更改,它们应该移动到列表中的适当位置。 我遍历一个 foreach,创建多个
我从主 NSWindow 打开一个 NSWindow。 DropHereWindowController *dropHereWindowController = [[DropHereWindowCon
我需要放置一个 form 3 按钮,当我单击该按钮时,将其显示为按下,其他按钮向上,当我单击另一个按钮时,它应该为“向下”,其他按钮应为“向上” 最佳答案 所有按钮的属性“Groupindex”必须设
我有一个使用 AnyEvent::MQTT 订阅消息队列的 perl 脚本。 目前我想要它做的就是在收到消息时打印出来。我对 perl 完全陌生,所以我正在使用它附带的演示代码,其中包括将 STDIN
如何在 .NET 应用程序中保持 TreeView 控件的滚动位置?例如,我有一个树形 View 控件,并经历了一个向其添加各种节点的过程,并将它们固定在底部。在此过程中,我可以滚动浏览 TreeVi
我维护了大量的 vbscripts,用于在我的网络上执行各种启动脚本,并且有一些我在几乎所有脚本中使用的函数。 除了复制和粘贴之外,有没有人对我如何创建可重用 vbscript 代码库有建议。我并不反
我有一些关于 Azure 自托管的问题。 假设用户 Alex 在物理机 M 上设置了 Windows 自托管代理。当 Alex 注销且计算机进入休眠状态时,代理将脱机。现在,当 Bob 登录同一台计算
我是一名优秀的程序员,十分优秀!