标签: transform

仅使用CSS,可以通过操纵单个矩形来创建内角大于180度的四边形吗？我知道可以使用CSS3转换从标准矩形创建任意凸四边形.

我已经能够以几种不同的方式使用多个矩形创建凹多边形(有时借助隐藏溢出); 一些组合:

1. 相邻的矩形.这是一个问题,因为由于抗锯齿而在接缝处出现视觉差异,这在高对比度背景下更明显.当与旋转一起使用时效果可能特别差(除了像45度这样的"漂亮"旋转).矩形还具有令人发狂的倾向,即在各种变焦水平下奇怪地对齐.
2. 重叠矩形,其中四边形由矩形的并集组成(每个矩形的颜色是四边形的颜色).当四边形的颜色使用alpha通道时,这是一个问题,因为重叠区域看起来更暗.
3. 重叠矩形,其中四边形由矩形的差异组成(至少一个矩形的颜色是背景的颜色).当通过在偏移处绘制相同形状来模拟阴影时,这是一个问题,因为前景的重叠区域"擦除"任何底层阴影.

[编辑] 这里可以看到使用#1和#3的凹四边形(一种"星际迷航"符号)的例子.

我希望有一个带有模拟插入阴影的凹四边形(带有alpha通道的深色前景色,带有alpha通道的浅色阴影),这就是上面的#2和#3有问题的原因.在这一点上,一个实际的阴影似乎是不可能的; 我对调整元素的阴影没有很好的体验.

那么,有没有可能通过操纵一个矩形来做到这一点？或者,还有其他一些我没有考虑过的方法吗？

[编辑]

我认为这是可能在有限的程度,但它是一种作弊的:使用单字符的文本,其字形已经在一些合理的安全字体凹四边形(例如,U + 27A4,黑色宋体的Unicode向右箭头) ,然后改变废话.但是,这会导致跨浏览器与页面的其他元素对齐的问题.

在编程问题之前,我认为我需要给出一些我正在做的事情的背景知识,以便于理解我的问题:

我在向受试者主体显示一些图案的同时记录眼球运动.通过实验,我后来展示了这些模式的一些对称变换.

我得到的是固定坐标和持续时间列表:

{{fix1X,fix1Y,fix1Dn},{fix2X,fix2Y,fix2Dn} ... {fixNX,fixNY,fixNDn}}

地点:

- fix1X是第一次固定的X坐标.

- fix1Y是第一次固定的Y坐标.

- fix1D是固定的持续时间(以毫秒为单位)

请考虑 :

FrameWidth  = 31.36;
scrHeightCM = 30;
scrWidthCM  = 40;
FrameXYs    = {{4.32, 3.23}, {35.68, 26.75}};  (* {{Xmin,Ymin},{Xmax,Ymax}} *)

以下是1个显示器的固定(屏幕上3s刺激演示期间的主题固定)

fix ={{20.14, 15.22, 774.}, {20.26, 15.37, 518.}, {25.65, 16.22, 200.}, 
      {28.15, 11.06, 176.}, {25.25, 13.38, 154.}, {24.78, 15.74, 161.}, 
      {24.23, 16.58, 121.}, {20.06, 13.22, 124.}, {24.91, 15.8, 273.}, 
      {24.32, 12.83, 119.}, {20.06, 12.14, 366.}, {25.64, 18.22, 236.}, 
      {24.37, 19.2, 177.}, {21.02, 16.4, 217.}, …

我正在编写一个帮助器,对输入字符串执行许多转换,以便创建该字符串的搜索友好表示.

考虑以下情况:

• 全文搜索德语或法语文本
• 数据存储区中的条目包含
  1. Müller
  2. Großmann
  3. Çingletòn
  4. Bjørk
  5. Æreogramme
• 搜索应该是模糊的
  1. ull,Üll等比赛Müller
  2. Gros,groß等比赛Großmann
  3. cin 等.匹配 Çingletòn
  4. bjö,bjo等比赛Bjørk
  5. aereo 等.匹配 Æreogramme

到目前为止,我在案例(1),(3)和(4)中取得了成功.

我无法弄清楚的是如何处理(2)和(5).

到目前为止,我尝试了以下方法无济于事:

CFStringNormalize() // with all documented normalization forms
CFStringTransform() // using the kCFStringTransformToLatin, kCFStringTransformStripCombiningMarks, kCFStringTransformStripDiacritics
CFStringFold() // using kCFCompareNonliteral, kCFCompareWidthInsensitive, kCFCompareLocalized in a number of combinations -- aside: how on earth do I normalize simply _composing_ already decomposed strings??? as soon as I pack that in, my …

我正在做类似这个问题的事情: 将曲线图案匹配到图像的边缘

基本上,我在两个图像中有相同的曲线,但两者之间有一些仿射变换.这是两个图像的示例:

此搜索

镜像2

因此,为了进入Image2,您可以对Image1应用一些平移,旋转,缩放等.

有谁知道如何解决这个转变？

相位相关不起作用,因为它不仅仅是翻译.光流不起作用,因为没有足够的细节来解决平移,旋转,缩放(它几乎是二进制图像).我不确定Hough Transforms是否会给我很好的数据.

我现在有这样的:

http://jsfiddle.net/9DGb2/

但出于某种原因,如果我将css更改为:

div {
    width: 200px;
    height: 100px;
    background-color: yellow;
}
div:hover {
    -moz-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    -o-transform: scale(1.05) slow;
    -ms-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    transform: scale(1.05) slow;
}

它不会工作.

所以我猜它不能这样做？

我正在为android(api> 14)实现3d卡翻转动画,并且有大屏幕平板电脑(> 2048 dpi)的问题.在问题调查期间,我来到以下基本块:

尝试使用矩阵和相机的旋转Y转换视图(简单的ImageView)一些角度,它适用于角度<60和角度> 120(转换和显示)但是当角度在60和60之间时图像消失(只是不显示) 120.这是我使用的代码:

private void applyTransform(float degree) 
{
     float [] values = {1.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f};
     float centerX = image1.getMeasuredWidth() / 2.0f;
     float centerY = image1.getMeasuredHeight() / 2.0f;

     Matrix m = new Matrix();
     m.setValues(values);

     Camera camera = new Camera();
     camera.save();

     camera.rotateY(degree);
     camera.getMatrix(m);

     camera.restore();

     m.preTranslate(-centerX, -centerY); // 1 draws fine without these 2 lines
     m.postTranslate(centerX, centerY);  // 2 

    image1.setImageMatrix(m);
}

这是我的布局XML

   <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout     xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/ImageView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" …

这是一个Jsfiddle 演示

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="MyPath" d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
    </defs>
    <use xlink:href="#MyPath" fill="none" stroke="red" />
    <text class="material-icons">
        <textPath xlink:href="#MyPath">&#xe55d; &#xe55d; &#xe55d; &#xe55d;</textPath>
    </text>
    <!-- Show outline of the viewport using 'rect' element -->
    <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" />
</svg>

 是一个特殊字符,显示为"箭头".

有在上述演示了一个问题:箭头的方向在<textPath> …

我最近成功地使我的增强现实应用程序启动并运行接近预期.但是,我遇到了一个问题,即使值是正确的,增量仍然是一些翻译!因为我这将是美妙的得到这个解决如此接近到有这件事.

该系统利用具有红外反射标记的外部跟踪系统(Polaris Spectra立体光学跟踪器)来建立全局和参考帧.我有一个带有标记的LEGO结构,它是增强的目标,使用CAD创建的LEGO结构的3D模型,具有其真实世界对应物的精确规格,跟踪指针工具和带有世界参考的相机标记附在它上面.使用3D Slicer中的工具集将虚拟空间注册到现实世界中,这是一个医学成像软件,这是我正在开发的环境.下面是几张照片,只是为了澄清我正在处理的系统(May或可能与该问题无关).

因此,简要概述每个标记/组件的确切作用(标记是黑色十字架与四个银球):

• 世界标记(右侧第1个图像)是所有其他标记变换的参考框架.它固定在LEGO模型上,因此可以对LEGO的虚拟等效物进行单次注册.
• 相机标记(第1张图像,附在相机上)跟踪相机.通过使用执行的外部校准将相机注册到该标记cv::solvePnP().
• 棋盘用于使用跟踪指针(未示出)获取用于外部校准的数据cv::findChessboardCorners().

到目前为止,我一直在粉碎我的脸,反对系统背后的数学,直到最终排成一行.当我在估计相机原点到参考原点的位置移动时,两者之间的平移向量约为[0; 0; 0].因此,所有注册似乎都能正常工作.但是,当我运行我的应用程序时,我得到以下结果:

如您所见,增强中存在奇怪的偏移.我已经尝试去除图像上的失真校正(目前已完成cv::undistort()),但这只会使问题变得更糟.旋转都是正确的,正如我之前所说,翻译似乎都很好.我不知道是什么导致了这一点.当然,在渲染管道的实现过程中会出现很多问题,所以我主要是在这里发布这个,希望有人遇到过类似的问题.我已经使用基于网络摄像头的跟踪方法执行了这个项目,即使我使用了相同的渲染过程也没有遇到过这样的问题.

在这篇文章中,我故意有点模棱两可,以避免因为情况的细节而使读者陷入困境,因为我可以包含许多不同的细节.如果需要更多信息,我可以提供.任何建议或见解都会受到大力赞赏.谢谢!

我正在尝试使用Angular 2样式指令应用于DIV,转换属性:

<div
     [style.width.px]="front.width"
     [style.height.px]="front.height"
     [style.background-color]="front.backgroundColor"
     [style.transform]="front.transform"></div>

组件数据是:

front['width'] = this.width + this.gapw;
front['height'] = this.height + this.gaph;
front['background-color'] = settings.backfacesColor;
front['transform'] = 'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )';

我在控制台中收到此警告:

WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, …

我有一个简单的多列布局; 我想举一个元素上:hover使用translateY.

它会导致闪烁(在Chrome 57上测试).我该如何解决？

"use strict";

$(function () {
  var $target = $('.wall');

  function getImageUrl(id) {
    var width = 500;
    var height = 250 + Math.floor(Math.random() * 150);
    return "https://unsplash.it/" + width + "/" + height + "?image=" + id;
  }

  function addElement(element) {
    var $template = $target.find('.template').clone().appendTo($target).removeClass("template");

    $template.find("a").attr("href", element.post_url);

    $template.find("img").attr("src", getImageUrl(element.id));

    $template.find("figcaption").text(element.author);

    $template.removeClass("hide");
  }

  $.getJSON("https://unsplash.it/list", function (data) {
    var images = 12;
    var elements = [];

    function getRandomImage() {
      var id = Math.floor(Math.random() * data.length); …