个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在使用 HTML5 和 kinetic js 创建平面图应用程序。目前我能够创建一个矩形容器，您可以在其中拖放对象。您可以在此链接中看到它的实际效果 http://jsfiddle.net/wQ8YA/29/
创建它的js代码是..
//create a group
var group = new Kinetic.Group({
draggable: true //make group draggable
});
var rec = new Kinetic.Rect({
x: 10,
y: 330,
width: 600,
height: 600
});
group.add(rec);
目前容器是这样的
但是我想把它变成这样..
在第二张图片中，用户可以通过单击容器边框上的任意点并拖动它来扭曲容器。我尝试自己做但不知道从哪里开始，这个概念叫什么以及如何实现它。请帮助..
最佳答案
基本原理:
您的底部图像似乎是一组 4 条三次贝塞尔曲线，形成一个矩形。
矩形 Angular 上的正方形设置曲线的起点和终点。
圆圈设置曲线的 2 个控制点。
如果控制点位于起点和终点之间的假想线上，则曲线成为连接起点和终点的线段。
如果您添加代码以允许用户拖动起点、终点和控制点，您将拥有底部图像中的功能。
您可以使用 Kinetic.Rect、Kinetic.Circle 和 Kinetic.Line 来允许用户拖动控制点。
由于 KineticJS 没有三次贝塞尔曲线形状，您将不得不使用 Kinetic.Shape 根据控制点的位置自定义绘制 4 条曲线。
这是一个简单的示例，其中包含 1 个 anchor ，可通过拖动改变右上角:
http://jsfiddle.net/m1erickson/t2mhpmrs/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var g=new Kinetic.Group({
x:100,y:100,
});
layer.add(g);
var room=new Kinetic.Shape({
x:0,
y:0,
width:100,
height:100,
stroke:"blue",
fill: 'red',
drawFunc: function(context) {
var x=this.x();
var y=this.y();
var w=this.width();
var h=this.height();
var right=anchorTR.x();
var top=anchorTR.y();
context.beginPath();
context.moveTo(x,y);
// top
context.bezierCurveTo(x+w/3,y,x+w*2/3,y,right,top);
// right
context.bezierCurveTo(x+w,y+h/3, x+w,y+h*2/3, x+w,y+h);
// bottom
context.bezierCurveTo(x+w*2/3,y+h, x+w/3,y+h, x,y+h);
// left
context.bezierCurveTo(x,y+h*2/3, x,y+h/3, x,y);
context.fillStrokeShape(this);
}
});
g.add(room);
var anchorTR = new Kinetic.Circle({
x:100,
y:0,
radius:8,
fill:"green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorTR);
layer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag green circle to change red rect</h4>
<div id="container"></div>
</body>
</html>
关于javascript - 通过单击并拖动特定的边界点来扭曲 Canvas 中的形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25159022/
25
4
0
我编写了一个应用程序，它有一个 UIViewController，它在纵向模式下显示另一个 UIViewController，在横向模式下显示不同的 UIViewController。 当我去风景时，
我想为 UISegmentedControl 提供以下方面: 注意灰色背景 View ，以及分段控件未选定项目的白色背景。 但是，如果我为 UISegmentedControl 提供白色背景，我会得到
我正在尝试为我的可排序项目创建边界。我看过这个问题/答案: jquery sortable keep within container Boundary 并尝试将我的 JS 以此为基础，但无论出于何种
我正在尝试编写执行以下操作的代码:如果我单击起始位置为 (100,100) 的字符串 C(JLabel)，该字符串将在 JFrame 的边界内移动。代码本身并不难实现，但我遇到了问题为 JLabel
我有一个 .xib 文件，其中包含我想用来播放视频文件的 View 。该 View 具有配置其大小和位置的约束。现在我需要获取这些来配置我的视频播放器: let slide1: OnboardingS
我将从 Google map 转到 Apple map 。 Google map 能够根据东北和西南坐标更新相机，如下所示: let bounds = GMSCameraUpdate.fit(GMSC
这个问题在这里已经有了答案: Border over a bitmap with rounded corners in Android (6 个答案) 关闭 6 年前。 如何为我的图片添加圆角边框？
我有一个任务是使用java.awt.Graphics绘制一定数量的圆圈。 绘制圆圈相当简单，但我只应该在圆圈出现在可见区域内时绘制圆圈。我知道我可以调用方法 getClipBounds() 来确定绘图
我在设置过渡时遇到问题，目前它是从上到下(它是悬停时显示的边框)。我希望过渡从中间开始并传播到侧面，或者至少从任何一侧开始并传播到另一侧... 我的导航菜单 anchor 使用导航链接类! * {
我来自 Java，目前正在学习 C++。我正在使用 Stroustrup 的 Progamming Principles and Practice of Using C++。我现在正在使用 vecto
我有一个要展开的循环: for(int i = 0; i < N; i++) do_stuff_for(i); 展开: for(int i = 0; i < N; i += CHUNK) {
Scala 中是否有类似 View 绑定(bind)但可以匹配子类型的东西？ 由于 Scala 中的 View 没有链接，我目前有以下内容: implicit def pimpIterable[A,
网站用户输入地址。 如果地址在边界内，则“合格”。如果地址超出边界，则“不合格”。 是否有现有的小部件或代码可以执行此操作？有人知道实现这一目标的第一步吗？感谢您的任何意见。 最佳答案 哇，反对票是怎
我有以下测试应用程序: import Codec.Crypto.AES import qualified Data.ByteString.Char8 as B key = B.pack "Thisis
我正在尝试添加一个 JButton，但它与进度条水平对齐。如何将 JButton 对齐到下面的线上？ 另外，我试图将所有组件分组到不同的组中，但我不确定如何执行此操作。有谁知道吗？ 最佳答案 要简单分
假设我们有一个像上面这样的相框。从中心开始，如何找到可用于绘制的面积最大的矩形(矩形中的所有像素必须为 rgb(255,255,255)？ 我需要找到图中所示的A点和B点的x和y坐标。 我的方法之一是
这可能是一个愚蠢的问题，但当我创建一个类时，我应该如何正确设置其中属性的边界。 例子:如果我有这门课 class Product { private string name; publ
我正在从 leaflet 迁移回来，如果我需要 map 绑定(bind)，我使用以下代码: var b = map.getBounds(); $scope.filtromapa.lat1 = b.ge
我正在学习如何创建自定义 UIView。我正在制作的这个特定 View 包含几个按钮。我注意到，当我从惰性实例化 block 中调用frame/height属性时，我得到的值是128，但是当我调用dr
我正在尝试制作一个弹跳球。设置的边界允许球在超出框架边界后从起点开始。我无法让球弹起来。一旦击中边界(框架的外边缘)，如何让球弹起？我相信问题出在 moveBall() 方法中。 主类 导入 java
我是一名优秀的程序员,十分优秀！