我在CSS中有以下转换矩阵
// rotate the element 60deg
element.style.transform = "matrix(0.5,0.866025,-0.866025,0.5,0,0)"
我可以用这个找到旋转...
// where a = [0.710138,0.502055,-0.57735,1,0,0]
var rotation = ((180/Math.PI) * Math.atan2( ((0*a[2])+(1*a[3])),((0*a[0])-(1*a[1]))) - 90
console.log(rotation); // ~60
同样如果......
// skew(30deg,-50deg)
element.style.transform = "matrix(1,-1.19175,0.57735,1,0,0)"
var skewY = ((180/Math.PI) * Math.atan2( ((0*a[2])+(1*a[3])),((0*a[0])-(1*a[1]))) - 90;
var skewX = (180/Math.PI) * Math.atan2( ((1*a[2])+(0*a[3])),((1*a[0])-(0*a[1])));
console.log([skewX,skewY]); // ~= [30,-50]
然而,只要我使用倾斜和旋转,一切都变得奇怪,因为旋转公式与倾斜公式相同...所以公式不能正确.
如何确定已应用两个属性的旋转和倾斜,我所知道的是矩阵变换.
同时缩放也搞砸了我的偏斜值,我认为不应该这样.
我会定义一个文本框(单行)
默认情况下,字符大小为16(例如)
当文本比文本框大时,我不希望它换行或文本框变大,我希望文本大小适合文本框的最大大小.文本.当文本返回较小的大小时,它可以恢复其初始大小(在我们的示例16中).可能管理最小尺寸
如果你有一个想法,我采取:)
提前致谢
测试案例:http://jsfiddle.net/Da7SP/273/
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
// ADD YOUR CODE HERE
var canvas = window._canvas = new fabric.Canvas('c');
var t1 = new fabric.Textbox('My Text', {
width: 200,
top: 5,
left: 5,
fontSize: 16,
textAlign: 'center'
});
var t2 = new fabric.Textbox('My text is longer, but I do not want the box to grow, or the text to wrap. …我们有以下电话fetch.
this.http.fetch('flasher', { method: 'post', body: jsonPayload })
.then(response => response.json())
.then(data => console.log(data));
当我们收到200响应但在收到500响应时没有记录到控制台时,这种方法有效.我们如何处理500？
我正在使用fabric js库来自定义文本.颜色选择器在所有浏览器中工作正常,但它不适用于safari.
var canvas = new fabric.Canvas('canvas');
$('#fill').change(function(){
var obj = canvas.getActiveObject();
if(obj){
obj.setFill($(this).val());
}
canvas.renderAll();
});
$('#font').change(function(){
var obj = canvas.getActiveObject();
if(obj){
obj.setFontFamily($(this).val());
}
canvas.renderAll();
});
function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100 ,
});
canvas.add(oText);
canvas.setActiveObject(oText);
$('#fill, #font').trigger('change');
oText.bringToFront();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="color" value="blue" id="fill" />
<select id="font">
<option>arial</option>
<option>tahoma</option>
<option>times new roman</option>
</select>
<button onclick="addText()">Add Custom Text</button>
<br />
<canvas id="canvas" width="750" height="550" style="border:1px solid #444"></canvas> …我是fabric.js的新手.我已经下载了fabric.js,但我不知道如何启动它.例如:
<html>
<head>
<script src="fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
<script>
var canvas = new fabric.Canvas('c1');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
</script>
</body>
</html>
在这个脚本中我应该看到一个圆圈.我按照这个例子:http://fabricjs.com/customization/
但为什么我看不到任何东西; 我错过了什么？
当我命名我的控件以便在POST或GET中获取数组时,我经常使用这种表示法.
<input name="color[1]" type="text" />
<input name="color[2]" type="text" />
<input name="color[3]" type="text" />
所以在我的脚本中我能做到
<?php $data=$_GET["color"];
for each ($color as $key=>$value) {
doSomething();
} ?>
经常发生我需要在javascript中获取这些id,但我无法得到它们,所以我经常为html中的每个元素添加一个ID,就像那样
<input name="color[3]" id="color_3" type="text" />
这样我就可以使用document.getElementsById('color_3')
相反,我想找到使用document.getElementsByName(color [3])的方法...但我无法真正让它工作.
有帮助吗？
我正在尝试使用 FabricJs 制作 T 恤定制器。
但每次我尝试将画布转换为 Base64
$('#frontCanvas')[0].value = $('canvas')[0].toDataURL("image/png")
我收到此错误：
SecurityError：操作不安全。
我确信与 crossOrigin 有关，但我不知道如何将其添加到我的脚本中。
我尝试了很多不同的方法，但没有成功。
任何帮助将不胜感激。
谢谢你！
$scope.loadImage = function (source) {
var opacity = (function (min, max) {
return Math.random() * (max - min) + min;
})(0.5, 1);
fabric.Image.fromURL(source, function (image) {
image.set({
left: 100,
top: 100,
angle: 0,
padding: 10,
cornersize: 10,
hasRotatingPoint: true
});
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
canvas.add(image);
});
};
我希望有人可以帮助解决这个问题，因为我似乎找不到可靠的解决方案。
是否有框架或通用设置可以很好地呈现 html 画布，并且在不同的像素密度下以正确的大小呈现？
我明白为什么这个问题存在。我已经进行了非常彻底的搜索，所以如果之前多次问过这个问题，我很抱歉，但我仍然没有看到一个强大的解决方案。
补充：为了澄清，画布渲染在视网膜屏幕上看起来很模糊，我想有一种方法可以让渲染无论在哪里查看都看起来清晰。Fabric 框架看起来很棒，但他们的演示在我的视网膜屏幕上看起来仍然很模糊。
我为这段代码制作了3种模式:
看起来它正在发挥作用.但我想改变两件事.例如,每当我选择一条线时,我只需要点击它.
你能告诉我如何改进我的代码吗？
谢谢您的回答.
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Test</title>
</head>
<body>
<button id="select">Selection mode</button>
<button id="draw">Drawing mode</button>
<button id="delete">Delete selected object(s)</button><br />
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>
<script type="text/javascript">
var line, isDown,mode;
var canvas = new fabric.Canvas('c');
$("#select").click(function(){
mode="select";
canvas.selection=true;
canvas.perPixelTargetFind = true;
canvas.targetFindTolerance = 4;
canvas.renderAll();
});
$("#draw").click(function(){
mode="draw";
});
$("#delete").click(function(){
deleteObjects();
});
// Adding objects to the canvas...
canvas.on('mouse:down', function(o){
isDown = true;
var …我正在使用HTML5并fabric.js用于上传多个图像。我想在此图像画布上添加自定义文本。现在，我正在将一张图片一张一张地上传到画布上。上传图像后，我想在画布上添加自定义文本。
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};canvas{
border: 1px …javascript ×8
fabricjs ×5
canvas ×2
html ×2
aurelia ×1
css ×1
fetch ×1
foreach ×1
html5 ×1
html5-canvas ×1
jquery ×1
matrix ×1
typescript ×1