个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试将图像添加到 Canvas ，但要将其限制为放置它的层的大小。我为 width 和 height层，但它仍然没有做我想要的。如果内容在边界外仍然可见，为什么会有宽度和高度？
有没有办法限制容器内的内容？
最佳答案
You can hide the content that overflows a Kinetic Image object in several ways
澄清:所有 kineticJS 层始终与舞台大小相同(不可更改)
但是，您可以将图像放入 KineticJS 图像对象中，然后操作该图像。
解决方案#1:使用图像对象的 offset 属性:
您可以使用 KineticJS 图像对象，例如使用 offset 属性将视口(viewport)变成更大的图像。如果您以后想要将视口(viewport)移动到原始图像的另一部分，则此方法很有用。
解决方案#2:使用图像对象 crop 属性:
您可以裁剪较大的原始图像以适应较小的 KineticJS 图像对象。如果您想永久查看原始图像的裁剪部分，则此方法很有用。顺便说一句，如果您想缩放裁剪部分，此方法也很有用。
当您将 crop 属性添加到 KineticJS Image 对象时，原始图像会根据您的规范进行裁剪。这将使您保留原始图像的所需部分并裁剪掉不需要的部分。
kImage=new Kinetic.Image({
image:img,
x:30,
y:30,
width:110,
height:110,
crop: {
x: 150,
y: 122,
width: 110,
height: 110
}
});
这是代码和 fiddle :http://jsfiddle.net/m1erickson/KbESf/
<!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-v4.5.1.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 150
});
var layer = new Kinetic.Layer();
stage.add(layer);
var kImage;
var img=new Image();
img.onload=function(){
addCroppedImage();
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png";
function addCroppedImage(){
kImage=new Kinetic.Image({
image:img,
x:30,
y:30,
width:110,
height:110,
crop: {
x: 150,
y: 122,
width: 110,
height: 110
}
});
layer.add(kImage);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Cropped image on Kinetic layer</p>
<div id="container"></div>
<p>Original Image</p>
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png">
</body>
</html>
关于KineticJS: overflow hidden 层的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17281340/
24
4
0
我想知道是否有任何方法可以调用和使用 overflow:hidden 隐藏得很好的东西。 为了阐明我的意思，在 this example我想知道“This is hidden”是div的隐藏部分。 这
如果我们有以下HTML StackOverflow 使用以下 CSS * { margin: 0; padding: 0; } #i { overflow:
我正在使用 jQuery 制作幻灯片，我有几张图片应该一次滑入一张图片。我正在使用宽度与图像宽度相同的 div:80 像素。我使用了 white-space:no-wrap 和 overflow:hi
如果我有一个样式为 overflow: hidden; 的 div，我发现有时键盘操作会导致 div 滚动。而且由于没有滚动条，所以真的没有办法让 div 回到原来的状态。除了指定样式以防止出现这种情
我有一个 UIImageView，在表格单元格中有一个自定义类，它也使用一个自定义类。 UIImageView 作为单元格自定义类的属性连接。 UIImageView 有一个调用方法的 UITapGe
我正在创建一个网站，在一个 div 中我有一个视频，但我不想在移动设备上显示这个视频，所以我使用 hidden-xs 和 hidden-sm，到目前为止一切顺利。 但是，我的问题是，当我使用这些类时，
我对 C++ 可见性属性有疑问。我已阅读 http://gcc.gnu.org/wiki/Visibility但我不太明白它是如何工作的。 我想在我拥有的一些共享库中隐藏可见性。我相信这意味着符号被隐
我通过CSS的草图创建了一个菱形，它位于一个圆圈的左上角。 我为圆圈设置了overflow: hidden。钻石怎么还能触发cursor: pointer？ 这是 project 的代码笔. html
这个问题在这里已经有了答案: Shape with a slanted side (responsive) (3 个答案) 关闭 3 年前。
在使用 Angular Material 时，我一直在看到 aria 属性。有人可以向我解释一下 aria 前缀是什么意思吗？但最重要的是我想了解的是 aria-hidden 和 hidden 属性之
我正在阅读有关 aria 使用的一些内容，并遇到了以下文档: Fourth Rule of ARIA Use 。我不清楚的一个部分是: "Applying aria-hidden to a paren
以下是我的简单导航代码。单击右上角的图标时会出现两个 div。我还在顶部使用 :before 实现了这些分区的三 Angular 形提示。对于第一个 div，我设置了 overflow:scroll
input[type=hidden] 和 visibility : hidden; 有什么区别？ 最佳答案 第一个是输入元素，第二个是CSS2中的样式。 visibility: hidden; vis
我遇到了一个奇怪的问题，似乎与浏览器相关(IE9 及更低版本与 IE11)，但想知道为什么会出现奇怪的行为。 问题描述:我使用 Spring 框架并使用其相关标签库来检索 JSP 上的数据。有一个称为
我在 viewDidLoad 中的两个 UIView 上将 hidden 属性设置为 YES。单击按钮时，它们将设置为 NO，因此将显示它们。如何在每次单击按钮时使这些属性在是/否之间切换？ 最佳答案
我正在尝试使用树状列表实现侧边栏。我希望树中的每个元素只填充一行——没有溢出，没有换行/换行。 overflow: hidden; 可能是一个很好的解决方案，但还有另一个要求 - 每行都有一个绝对 d
我想用 overflow: hidden 隐藏一个超出容器的标题: HTML: Heading CSS: div { overflow: hidden; } h1 { transfor
我对 overflow:hidden 和 body 标签有疑问。这是一个小例子 主体版本(不工作) http://jsfiddle.net/5hGSp/13/ DIV 版本(有效)
html 的“隐藏”属性是一个 bool 值，不需要设置值。仅仅存在就足够了。 “aria-hidden”属性怎么样？光有存在感就够了吗？或者它是否需要设置值“true”？ 最佳答案 aria-hid
在我的页面上，我有一个导航菜单和两个内容容器。 内容容器使用overflow:hidden 以便一次只有一个子div 显示。 我希望导航链接充当相关内容的激活器，以便在容器中滚动查看。 因此，例如，如
我是一名优秀的程序员,十分优秀！