Question

我有一个具有用Program output: 02:33:50 Exception in thread "main" org.threeten.bp.format.DateTimeParseException: Text '33m 50s' could not be parsed: Unable to obtain LocalTime from TemporalAccessor: DateTimeBuilder[fields={SecondOfMinute=50, NanoOfSecond=0, MicroOfSecond=0, MinuteOfHour=33, MilliOfSecond=0}, ISO, null, null, null], type org.threeten.bp.format.DateTimeBuilder at org.threeten.bp.format.DateTimeFormatter.createError(DateTimeFormatter.java:1559) at org.threeten.bp.format.DateTimeFormatter.parse(DateTimeFormatter.java:1496) at org.threeten.bp.LocalTime.parse(LocalTime.java:437) at MainKt.main(main.kt:16) at MainKt.main(main.kt) Caused by: org.threeten.bp.DateTimeException: Unable to obtain LocalTime from TemporalAccessor: DateTimeBuilder[fields={SecondOfMinute=50, NanoOfSecond=0, MicroOfSecond=0, MinuteOfHour=33, MilliOfSecond=0}, ISO, null, null, null], type org.threeten.bp.format.DateTimeBuilder at org.threeten.bp.LocalTime.from(LocalTime.java:405) at org.threeten.bp.LocalTime$1.queryFrom(LocalTime.java:116) at org.threeten.bp.LocalTime$1.queryFrom(LocalTime.java:113) at org.threeten.bp.format.DateTimeBuilder.build(DateTimeBuilder.java:642) at org.threeten.bp.format.DateTimeFormatter.parse(DateTimeFormatter.java:1492)绘制的自定义形状的元素。使用html5 clip-path属性时，在拖动的图像上将忽略剪切路径。有没有办法让剪切路径在图像上起作用？除了简单地使用剪切路径（没有棘手的draggable和::before技巧）以拖动方式绘制自定义形状之外，一种替代方法也可能是公认的答案。

（Beware, browser support is limited）

::after

#foo {
   padding: 0 1ch;
   clip-path: circle(50%);
   color: white;
   background: indianred;
}

要复制运行该代码段，请单击栏并拖动。问题的屏幕截图：

Answer 1

在没有看到更多代码的情况下，很难说出问题出在哪里，但这是一个使用剪辑路径的可拖动元素的示例。我刚刚从w3schools修改了一些代码，所以这不是我的原始工作。 https://codepen.io/zenRyoku/pen/EzWmmP

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

body {
  height: 100%
}

#mydiv {
  position: absolute;
  height: 100px;
  width: 100px;
  z-index: 9;
  background-color: plum;
  text-align: center;
  clip-path: circle();
  cursor: move;
}

<!DOCTYPE html>
<html>
  <body>
    <div id="mydiv"></div>
  </body>
</html>

但是，我确实举了另一个例子，其中将项目拖动到另一个容器中，并且剪切路径在拖动时消失，在mouseup时返回。也许那重复了您的问题？在这种情况下，可能要执行上述的Javascript或制作具有所需形状的SVG并将其用作可拖动元素的背景。 https://codepen.io/zenRyoku/pen/XwMgmM

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#drop {
  width: 200px;
  height: 200px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #aaaaaa;
}

#drag1 {
  padding: 2rem;
  background: pink;
  clip-path: circle();
}

#drag2 {
  padding: 2rem;
  background: plum;
  clip-path: circle();
}

<!DOCTYPE HTML>
<html>
  <body onload="makeDraggable(evt)">
    <div class="container">
      <div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <label id="drag1" draggable="true" ondragstart="drag(event)"></label>
      <div id="drag2" draggable="true" ondragstart="drag(event)"></div>
    </div>
  </body>
</html>

使剪辑路径可拖动图像

1 个答案: