Question

我正在使用Interactjs在SVG视口周围拖动SVG元素，主要是因为它支持手势，我最终将用于在移动设备上轮换。但是我遇到了简单拖动的问题。

#!/usr/bin/env python
import math
from shapely.geometry import Point
from shapely.affinity import scale, rotate

#input parameters
A = Point(1, 1)
B = Point(4, 5)
R = 1

d = A.distance(B)

#first, rotate B to B' around A so that |AB'| = |AB| and B'.y = A.y
#and then take S as midpoint of AB'
S = Point(A.x + d/2, A.y)

#alpha represents the angle of this rotation
alpha = math.atan2(B.y - A.y, B.x - A.x)

#create a circle with center at S passing through A and B'
C = S.buffer(d/2)

#rescale this circle in y-direction so that the corresponding
#axis is R units long
C = scale(C, 1, R/(d/2))

#rotate the ellipse obtained in previous step around A into the
#original position (positive angles represent counter-clockwise rotation)
C = rotate(C, alpha, origin = A, use_radians = True)

for x,y in C.exterior.coords:
    print(x, y)

Interactjs没有给出当前光标x，y，因此它是根据事件累积的delta x，y，（event.dx，event.dy）计算的，偏离起始位置（event.x0），event.y0）。然后我将其转换为目标元素的局部坐标（如果它已被旋转，倾斜等）（根据此SO answer），然后将其作为元素当前的平移变换应用变换。

rm(list = ls())

data <- iris

data <- data[data$Species %in% c("setosa", "virginica"),]

data$Species = ifelse(data$Species == 'virginica', 0, 1)

mod_headers <- names(data[1:ncol(data)-1])

f <- function(mod_headers){
    for(i in 1:length(mod_headers)){
    tab <- combn(mod_headers,i)
    for(j in 1:ncol(tab)){
      tab_new <- c(tab[,j])
      mod_tab_new <- c(tab_new, "Species")
      model <- glm(Species ~., data=data[c(mod_tab_new)], family = binomial(link = "logit"))
    }
    }
  best_model <- model[which(AIC(model)[order(AIC(model))][1])]
  print(best_model)
}

f(mod_headers)

JSFiddle here。

我在操纵元素＆＃34;转换＆＃34;属性，通过target.transform.baseVal.getItem（0）.setMatrix（），而不是通过CSS转换，因为我需要单位在SVG空间的相同单位。此外，我可以轻松地将它们合并为一个矩阵，我可以将其发送回服务器，以便在其他视图上轻松呈现形状。

但是简单的拖动会导致第一个事件发生大的跳转，然后目标元素在跟随光标时不在光标下。

关于我应该怎么做的任何想法？

Answer 1

我前段时间做过这个：

<script>
      var ns = 'http://www.w3.org/2000/svg'
      var svg = document.createElementNS( ns,'svg')
          svg.id = 'svg'
          svg.style.height = '100%'
          svg.style.width = '100%'

          rect = document.createElementNS( ns,'rect')
            rect.setAttribute('width', '100px')
            rect.setAttribute('height', '100px')
            rect.setAttribute('fill', 'green')
          svg.append(rect )
        document.body.append(svg)


        svg = document.getElementById('svg')

        var mousedown = false;

        window.onmousemove = (e) => {
        var x = e.clientX
        var y = e.clientY

            svg.onmousedown = (e) => {
                var x = e.clientX
                var y = e.clientY
                    diffX = Math.abs(e.target.getBoundingClientRect().left - x)
                    diffY = Math.abs(e.target.getBoundingClientRect().top - y ) 
                console.log(diffY +' || '+e.target.getBoundingClientRect().top+' || '+y)

                mousedown = true;
            }

            if(mousedown) {
                e.target.setAttribute('x', x - diffX) 
                e.target.setAttribute('y', y - diffY)
                window.onmouseup = () => {
                    mousedown = false;
                }
            }
        }
  </script>

Interactjs与SVG

1 个答案: