小编Roe*_*ada的帖子

我上面的代码在CSS transform-origin和scale之间切换到CSS宽度和滚动条.

我需要进行此切换,因为我正在缩放我正在我的网站中使用的DIV包装.

我正在使用CSS translateX和translateY和Scale来实现更平滑的缩放缩放,但在进行缩放后,我需要返回宽度和滚动条,以便用户可以在布局中移动.

我在这里有一个例子,说明我是如何进行切换的,并且顶部有一点余地,我无法真正开始思考.

这样做的正确方法是什么？

var isOrigin = false;
        var originX = 500;
        var originY = 200;
        var scale = 1.5;
        var deltaX = 0;
        var deltaY = 0;

        var from_origin_to_scroll = function () {
            if (isOrigin) { from_scroll_to_origin(); return; }

            var wrap = $('.containter .wrap');

            //reset scroll
            const el = document.scrollingElement || document.documentElement;
            $('.containter')[0].scrollLeft = 0;
            el.scrollTop = 0;

            wrap.css({
                transformOrigin: originX + "px " + originY + "px",
                transform: "translate3d(" + deltaX + "px," + deltaY …

我正在尝试从右上角或左下角拖动时重新调整div元素的大小.

为了计算新的宽度和高度,我需要知道矩形上的其他两个点

如何只给出两个点和旋转度？

请查看我添加的图像以完全理解这个问题加上,div也可以旋转(居中原点)

• 澄清我的问题:目的是通过将鼠标光标从右上角拖动到左下角来调整div的大小.然后调整图像大小,使宽度为mouseX与左侧之间的距离.并且高度将从鼠标Y到底部.因此,当鼠标光标移动时,我需要计算左上角和右下角.谢谢.

当我使用filter时出现问题:drop-shadow和transform:rotate(## deg)

我附上了一张图片和一个网址,以便您自己查看

请注意,它发生在chrome上.

为什么会发生这种情况？如何防止这种情况发生？

请关注

.wrap1,
.wrap2 {
  position: absolute;
  top: 20%;
  height: 40%;
  width: 40%
}
.wrap1 {
  -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  -webkit-transform: rotate(5.696863186209043deg);
  filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  transform: rotate(5.696863186209043deg);
  left: 0;
}
.wrap2 {
  -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  -webkit-transform: rotate(0deg);
  filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  transform: rotate(0deg);
  left: 50%;
}
.inner,
.inner_color {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: …

我有一个要打印的网页。为此我使用phantomjs。

在下面的示例中，您会注意到一个奇怪的效果。非旋转文字已正确呈现

我似乎无法理解这种情况如何发生，chrome完美地呈现了这种情况，而phantomjs-webpageuserAgent设置为webkit。

这是我要捕获的链接：

http://www.facegift.co.il/canvas/print.aspx?userItemId=27477&Sc=974088&pagenum=3&width=1500&print=2

这是已渲染的图像：

这是我的代码示例：

var page = require('webpage').create();
var args = require('system').args;

var isLoad = false;

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';

page.viewportSize = { width: 500, height: 687.5 };

page.open('http://www.facegift.co.il/canvas/print.aspx?userItemId=27477&Sc=974088&pagenum=3&width=1500&print=2', function (status) {
var ue = page.evaluate(function () {
    return window.navigator.appVersion;
});
console.log("status: " + status);
console.log("ue: " + ue);

if (status === "success") {

    var timer = setInterval(function () {
        var ps = page.evaluate(function …

我在chrome上加载了一个包含多个SVG的页面.当我放大/退出其中一个SVG正在消失时,我不知道为什么会发生这种情况.

(即使我缩小到默认值,它仍然保持这种状态)

有任何想法吗？

如果您想自己尝试,这是网址

http://www.facegift.co.il/canvas/?userItemId=17887&sc=987404&print=1&width=1500&pageNum=7