小编Dur*_*rga的帖子

注意:我已经提出了SO问题,但它对我的情况没用,因为

1)我试图维持以前的边界,但截至目前它在缩放时重新计算边界.

我添加了下面的代码,以在缩放对象时自动停止增加边框.现在问题是我已经为对象添加了一个5px边框,但是当缩放对象时,它不会保留我之前添加的边框.

canvas.on('object:scaling', (e) => {
  var o = e.target;
  if (!o.strokeWidthUnscaled && o.strokeWidth) {
    o.strokeWidthUnscaled = o.strokeWidth;
  }

  if (o.strokeWidthUnscaled) {
    o.strokeWidth = o.strokeWidthUnscaled / o.scaleX;
  }
});

现在我想要的是防止在缩放对象时增加边框.边界应该保持原样.

这是片段/ Codepen

var canvas = new fabric.Canvas('canvas1');

$('.add_shape').click(function() {
  var cur_value = $(this).attr('data-rel');
  if (cur_value != '') {
    switch (cur_value) {
      case 'rectangle':
        var rect = new fabric.Rect({
          left: 50,
          top: 50,
          fill: '#aaa',
          width: 50,
          height: 50,
          opacity: 1,
          stroke: '#000',
          strokeWidth: 1
        });
        canvas.add(rect);
        canvas.setActiveObject(rect); …

我有一个图像，例如“img/Myimage.jpg”，我想将其转换为 Uint8ClampedArray 格式（如图所示）。

为了什么？我正在使用一个库，经过漫长的过程后将图像转换为这种格式，但我还有其他图像需要自己将它们转换为相同的格式。我该怎么做？原谅我的无知

var frames = animator.frames;
var res_c = document.getElementById("result");
var res_ctx = res_c.getContext('2d');
for (var x = 0; x < frames.length; x++) {
  //***frames are ImageData (Uint8ClampedArray)***
  res_ctx.putImageData(frames[x],0,0);
  console.log(frames[x])
  gif.addFrame(res_c,{copy:true,delay: 120});
}

我需要在 ImageData (Uint8ClampedArray) 中转换图像以添加其他帧

我想基于日期选择器启用/禁用按钮,我有一个像这样的检查设置:

  public dateChanged = false;
  public availableFromDate: Date;
  public availableToDate: Date;

 initDatepickers() {
    const currentDay = new Date();
    this.availableFromDate = currentDay;
    this.availableToDate = currentDay;
  }

 private dateCheck() {
    if ((this.availableFromDate > this.availableToDate) || (this.availableFromDate === this.availableToDate)) {
      this.dateChanged = false;
    } else {
      this.dateChanged = true;
    }
    console.log(this.dateChanged);
    console.log(`Available from - ${this.availableFromDate}`);
    console.log(`Available to - ${this.availableToDate}`);
  }

检查工作正常,但是从日期开始时按钮启用了!如果将值记录到控制台,则禁用按钮,因为init值为false,而不是因为检查有效.

两个日期对象的初始化方式不同(console.log dump):

true
clinics-upload-documents.component.ts:73 Available from - Fri Feb 22 2019 00:00:00 GMT+0100 (Central European Standard Time)
clinics-upload-documents.component.ts:74 Available to - Fri …

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.form = {
        name: 'my name',
        age: '25'
    }

    $scope.$watch('form', function(newVal, oldVal){
        console.log(newVal);
    },true);
    
    $scope.foo= function(){
    $scope.form.name = 'abc';
    $scope.form.age = $scope.form.age++;
    }
    $scope.foo();
    
    $scope.bar= function(){
    $scope.form.name = 'xyz';
    $scope.form.age = $scope.form.age++;
    }
    $scope.bar();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">{{form}}<br>
<label>Name:</label> <input type="text" ng-model="form.name"/><br>
        <label>Age:</label> <input type="text" ng-model="form.age"/>  </div>

在控制器中我改变了'form'对象属性四次,但是$ watch没有开火.从UI(输入),如果我改变它工作

我无法让textAlign 在fabric.js 中工作 fontSize、fontBackground 可以正常工作，但textAlign 不能正常工作。我错过了什么吗？

var canvas = new fabric.Canvas('myCanvas');

$('button.addText').click(function() {
  var text = new fabric.Text($(this).siblings().val(), {
    textAlign: 'center',
    fontSize: 40
  });
  canvas.add(text);
});

我为我的练习制作了小米时钟,但有一个问题,我不能制作色彩表盘.我希望逐个在表盘中传播白色,并且它以三角形和后面的表盘不透明度减少.

这是我想要实现的IMG: -

视频 :- https://vimeo.com/262815342

Codepen

var clock = "";

for(var i = 0; i < 360; i++){
	clock += "<div id='dials'><div id='cutline'></div></div>";
}
//clock += "<div id='circle'></div>";
clock += "<div id='dot'></div>";
clock += "<div id='mline'></div>";
clock += "<div id='hline'></div>";
clock += "<div id='tringleM'><div id='tringle'></div><div class='shadow'></div></div>";

document.getElementById('container').innerHTML = clock;

for (var i = 1; i <= 360; i++) {
	document.querySelector('#dials:nth-child('+i+')').style.transform = "rotate("+ (i-1) +"deg)";
}

/* Real Time Clock */
var hour, min, lol, lol1, …

当用户输入错误的输入时，自定义错误将生成并显示错误（您输入了错误的输入）。我创建了默认错误，但没有创建自定义错误。我需要。我需要自定义错误。任何人都可以帮助我

var Scrn = document.querySelector('#screen');
var maibox = document.querySelector('.calBox');
var exp = '';
var errro_btn = document.querySelector('#error_screen');
var close = document.querySelector('#close')

maibox.addEventListener('click', (e) => {
  let vlu = e.target.value;

  if (vlu) {
    if (vlu != 'undefined') {
      if (vlu == '=') {
        try {


          exp = eval(exp)
          Scrn.innerHTML = exp
        } catch (error) {

          errro_btn.innerHTML += error.message
          errro_btn.style.display = "block"

        }
      } else if (vlu == 'ac') {
        Scrn.innerHTML = '0'
        exp = ''
      } else if (vlu == 'OFF') …

我最近开始使用fabricjs，我有一个关于连接对象的问题。我确实创建了示例演示，用于从箭头连接parent object 到child object连接。我得到了示例演示http://kpomservices.com/HTML5CanvasCampaign/campaign.html。此代码应适用于结构 1.4.2。类似的代码可能适用于版本 2.3.3 不起作用。

错误 functions.js:963 Uncaught TypeError: c.setAngle is not a function

代码

function makeArrow(centerpt, left, top, line) {
    var c = new fabric.Triangle({
        width: 10,
        height: 10,
        left: left,
        top: top,
        //selectable: false,
        strokeWidth: 3,
        fill: 'grey',
        opacity: 1,
        stroke: 'grey',
        originX: 'center',
        originY: 'center'
    });

    c.hasBorders = c.hasControls = false;
    c.angle = 90;
    c.line = line;
    var dx = left - centerpt.x;
    var dy = top - centerpt.y;
    var …

我使用的是fabricJS 版本1.7.22。我想实现分组和取消分组的功能。

当我使用 toJSON(list_of_custom_attribute) 将画布转换为 json 时。我的自定义属性未添加到 json 中。（组中包含的子对象的自定义属性不会添加到 json 中）。

是否有任何分组补丁，以便每次我的所有自定义属性都添加到组的对象中。

我的分组代码如下（我借用了最新fabricJS版本2.7.0的fabricJS toGroup()函数的代码）：

var activeObject = this.canvas.getActiveGroup();
    var objects = activeObject._objects.concat();
    activeObject._objects = [];
    var options = fabric.Object.prototype.toObject.call(activeObject);
    var newGroup = new fabric.Group([]);
    delete options.type;
    newGroup.set(options);
    objects.forEach(function (object) {
        if (object) {
            object.canvas.remove(object);
            object.group = newGroup;
        }
    });
    newGroup._objects = objects;
    if (!activeObject.canvas) {
        return newGroup;
    }
    else {
        var canvas = activeObject.canvas;
        that.extend(newGroup, that.randomId());
        canvas.add(newGroup);
        canvas._activeObject = newGroup;
        newGroup.setCoords();
    }

我尝试一些可能有助于理解问题的场景。（我的所有画布对象必须包含名为“id”的自定义属性）

1) 添加一张图像并克隆该图像。现在将canvas转换为json。（JSON 包含我所有的自定义属性，如下所示 => [ 矩形[id], 圆[id] …

版

3.4.0

有关环境的信息

谷歌浏览器| 77.0.3865.120（正式版本）（64位）（同类群组：稳定）修订版| 416d6d8013e9adb6dd33b0c12e7614ff403d1a94-refs / branch-heads / 3865 @ {＃884}操作系统| Windows 10 OS版本1803（内部版本17134.1099）JavaScript | V8 7.7.299.13

测试用例

https://jsfiddle.net/areuohm/y2not8em/32/

(function(){
var canvas = new fabric.Canvas('canvasWorkspaceFamiliogram', { selection: false });
 		fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
    
var itemM = new fabric.Rect({width: 30,height: 30,fill: 'white',stroke: 'black',strokeWidth: 1, left:50,top:50});   
var itemF = new fabric.Circle({radius: 15,fill: 'white',stroke: 'black',strokeWidth: 1,left: 400,top: 200});

 itemF.relations = [];
 itemM.relations = [];
 
 canvas.add(itemM);
 canvas.add(itemF);
 createSVGPath(itemF,itemM,canvas);
 canvas.renderAll();

}());
function createSVGPath(startObj, endObj, context){                
  var svgCommands = [
    [ 'L', startObj.left, startObj.top], …