小编Van*_*bat的帖子

我正在尝试构建一个 Konva Text 容器，其内容垂直居中；

var infoText = new Konva.Text({
  x: 0,
  y: 0,
  text: `my long long ... text`,
  fontSize: 18,
  fontFamily: 'Arial',
  width: 50,
  height: 50,
  align: 'center'
});

我在文档中找到了align属性，但它只能使文本水平居中。如何垂直居中？

这是我的javascript

function ajax_post(){
            // Create our XMLHttpRequest object
            var hr = new XMLHttpRequest();
            // Create some variables we need to send to our PHP file
            var url = "LiveUpdate.php";
            var sb = document.getElementById("LiveUpdate").value;
            var FirstName = document.getElementById("FirstName").value;
            var images = document.getElementById("images").value;

            var vars = "update="+sb+"&FirstName="+FirstName+"&images="+images;
            hr.open("POST", url, true);
            // Set content type header information for sending url encoded variables in the request
            hr.setRequestHeader("Content-type", "multipart/form-data");
            // Access the onreadystatechange event for the XMLHttpRequest object
            hr.onreadystatechange = function() {
                if(hr.readyState == 4 …

我的问题是如何对两点之间的路径绘制进行动画处理。

考虑两点 A 和 B 之间的曲线或路径。我可以使用 Konvajs 中的线条绘制功能在画布上轻松绘制它。

然而，我真正想要的是对线的显示进行动画处理，以便它从 A 点开始并逐渐绘制到 B 点。显示应该是动画的，这样我就可以应用令人愉悦的缓动。

作为一个可比较的示例，请观看此网站https://coggle.it/上的简短视频，其中视频显示了新盒子的创建以及将其连接到旧盒子的线条。

如何在 XML 视图中为 datetimepicker 注册 validationError 回调，以及如何因无效日期输入而触发此事件。

datetimepicker 控件是一个带有弹出日期选择器的输入框。

用户可以直接在输入中键入或使用所选日期来选择日期。我可以向日期时间值添加复杂的验证，但当用户在框中输入无效日期（例如“1010101010010101010101010”或“32/15/2019”时，我尝试简单地触发validationError事件）。

理想情况下，我正在寻找一个约束来测试有效的日期值并在需要时触发validationError()函数。

我想解决方法是使用change()事件并在JS中进行验证，设置valueState等，但我想了解datetimepicker在这方面可以做什么，而不必诉诸多余的JS。

我确信这一定在文档中的某个地方，但尚未找到任何结论性的东西。我觉得 strictParsing 应该发挥一些作用。

我发现这个关于通过声明新数据类型设置日期范围约束的问题。我认为这可能是一个解决方案，但我一直不知道如何设置“有效日期”输入值的约束。

阅读有关sap.ui.model.type.DateTime的 SAPUI5 文档，其中提到

DateTime 类型支持以下验证约束：

最大值（期望以源模式格式呈现的日期时间） 最小值（期望以源模式格式呈现的日期时间）

它没有给出如何进行直接日期有效性或格式检查的指示。

有人能指出我正确的方向吗？

编辑 - 根据 @Matbtt 的建议和对文档的引用，我将类型更改为字符串文字sap.ui.model.type.DateTime。然而，该片段没有产生任何输出。我将其追溯到绑定到字符串的模型的绑定。当更改为绑定到 JS 日期对象时，此问题得到修复。

编辑-根据@Developer的建议添加了validationError回调，但似乎不起作用。请参阅片段。

// JSON sample data
var classData = {className: "Coding 101", id: 800, startdate: "2017-12-31T23:59:59.000"}

// convert JSON date to JS date object and format via moment for UI5 consumption
classData.startdateraw = new Date(classData.startdate)
classData.startdatefmt = moment(classData.startdateraw).format('YYYY-MM-DD-HH-mm-ss') 

sap.ui.getCore().attachInit(function() {
   "use strict";
   sap.ui.controller("MyController", …

我坚持认为SAPUI5中是否可以使用概念,并且由于文档在这个详细程度上可能有点难以处理,我在研究路径中提出的问题比正常情况要早.主要是我不想花太多时间,如果有一个立即'否'的答案.

我有一个使用JSON模型的主视图的用例,但我必须生成自己的控件 - 我不能使用SplitApp等.

该模型实际上是一个2层深的树,主要导致细节.从概念上讲是这样的:

{ 
    "master": [
        {
            "name": "Master 1",
            "detail" : [
                {
                "name": "Detail 1-1"
                },
                {
                "name": "Detail 1-2"
                }
            ]
        },
        {
            "name": "Master 2",
            "detail" : [
                {
                "name": "Detail 2-1"
                },
                {
                "name": "Detail 2-2"
                }
            ]
        }
    ]
}   

UX是一个可选择的主列表,当进行选择时,将刷新详细列表控件以显示所选主节点的子节点的详细信息.

我熟悉将模型绑定到视图

sap.ui.getCore().setModel(oModel) 
this.getView().setModel(oModel)

但是根据我迄今为止的学习情况,这会将视图中的所有控件绑定到一个模型.

我认为可能值得追求的选择是:

1. 将单独的模型绑定到每个主控制和详细控制,并编写自定义代码以在选择主控时切换详细模型.但是如何制作这样的绑定;
2. 使用单个模型,但以某种方式设置细节控件以识别"当前选定的"主控.
3. 在细节控制上使用某种过滤器.

进一步解释2,如果说我正在使用表格进行详细显示,我可能会在表格def中使用

   <Table
            id="detailList"
            items="{
                path: '/'
            }",
            ...
     >

所以我希望修改类似的路径

path: '/master[n]/detail/'

其中n表示选定的主实例.

是可能的,还是有另一种选择,或者我应该放弃.

编辑:我在这里发现了Michael Herzog这种基于过滤器的潜在解决方案.他的描述是:

我将举例说明如何在SAPUI5中实现matser-detail关系.

使用案例:当用户点击第一个表中的客户端时,所有相关订单都应显示在第二个表中.应隐藏其他客户的订单.

因此,在我们看来,我们有两个表:

1. 表:客户

2. 表:订单 …

我试图实现的是围绕自定义形状本身显示变压器。我直接从API文档中获取了代码，用于创建自定义形状并添加转换器。该变压器非常适合矩形，圆形等，但对于自定义形状，它似乎不能正确显示。

这是一个演示应用程序的链接，其中包含有关自定义形状和转换器的问题：https : //jsfiddle.net/5zpua740/

var stage = new Konva.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight
    });

var layer = new Konva.Layer();

/*
* create a triangle shape by defining a
* drawing function which draws a triangle
*/
var triangle = new Konva.Shape({
  sceneFunc: function (context) {
    context.beginPath();
    context.moveTo(120, 150);
    context.lineTo(320, 180);
    context.quadraticCurveTo(250, 200, 360, 270);
    context.closePath();

    // Konva specific method
    context.fillStrokeShape(this);
  },
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

// add the triangle shape to the …

我试图直接将通过 KonvasJS 动态添加到画布的图像居中。

这是小提琴：

http://jsfiddle.net/71Lw0bk8/7/

我已经弄清楚了代码，但它没有使用 Konva，而是尝试在没有库的情况下执行此操作，并且效果完美。

function addImage(imgUrl) {

    const img = new Image();

    img.onload = function () {
        var padding = 20;
        while (img.width + padding > canvas.width || img.height + padding > canvas.height) {
            if (img.width + padding > canvas.width) {
                let newWidth = canvas.width - (padding * 2);
                img.height = Math.round((img.height / img.width) * newWidth);
                img.width = newWidth;
            }
            else if (img.height + padding > canvas.height) {
                let newHeight = canvas.height - (padding * 2);
                img.width …

我见过一些询问如何围绕给定点旋转形状的问题，并决定自己问这个自答问题。那么 - 相对于 HTML5 画布，或者实际上任何二维表面，我如何围绕任意 x,y 点旋转形状？

在什么情况下HTML页面包含具有重复ID属性的元素是非法的？

作为一名使用HTML多年的开发人员,我意识到元素id 应该是唯一的 - 我要问的是重复id的实际负面影响.

当然,getElementByID() - 类似于某些库中的函数可能会返回数组而不是单个元素,这可能会在开发人员没有预料到这种情况时引发问题.但是,据我所知,这些功能将继续如此清晰地运行,它们不是id重复的突破效果.

那么为什么说不允许重复的ID 呢？

编辑:问题的驱动程序是我在生成列表/重复项目时看到了一些模板库,生成了具有重复ID的元素,我想知道它在实际条件下可能产生的影响以及如何决定是否采用这些库.

我还想知道模式插件或任何其他可能克隆现有隐藏节点从而创建重复的通过代码,然后在这种情况下浏览器会做什么的效果.

Konva 是否可以沿线/路径对形状（标记、圆形）进行动画处理。我尝试随着时间的推移手动计算位置，但这只有在从 A 到 B 的直线是直线时才可行，但我对贝塞尔曲线和多个路径点感兴趣。

所以我想知道 Konva 是否支持这种事情，或者有人可以指导如何处理这个问题。

这是我想在 Vue.js 中实现的行为这是我试图制作的 Js 小提琴示例： https: //jsfiddle.net/richardcwc/ukqhf54k/

//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;

//Mousedown
$(canvas).on('mousedown', function(e) {
    last_mousex = parseInt(e.clientX-canvasx);
    last_mousey = parseInt(e.clientY-canvasy);
    mousedown = true;
});

//Mouseup
$(canvas).on('mouseup', function(e) {
    mousedown = false;
});

//Mousemove
$(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX-canvasx);
    mousey = parseInt(e.clientY-canvasy);
    if(mousedown) {
        ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas
        ctx.beginPath();
        var …

我正在使用 Konva 库来绘制画布并将图像拖到它上面

我的问题是如何使用 Konva 选择画布的一部分并为所选部分填充颜色

1) 用户通过拖动鼠标选择一个部分 2) 为所选部分填充他想要的颜色