标签: kineticjs
KineticJS strokeWidth为1会导致模糊的半透明线而不是锐利的1像素线
我环顾互联网并没有发现任何东西,我看过其他KineticJS示例,它们在矩形上使用了strokeWidth 1,它们看起来都是半透明的2像素线,而不是一条漂亮的1px不透明黑线.
现在,我猜测Google没有任何解决方案真的很简单或不可能,但是......你知道如何使用KineticJS获得一个px边框吗？
$(window).load(function(){
var stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.attrs.width/2, y: stage.attrs.height/2,
width: 100, height: 100,
fill: "#eee", stroke: "black", strokeWidth: 1
});
layer.add(rect);
stage.add(layer);
});
有人有任何想法吗？
推荐指数
解决办法
查看次数
KineticJS:听.on()
使用KineticJS,是否有可能仅将该函数绑定一次？和jQuery相同......
例如.在jQuery中
// bad
$('.wrap a').on('click', myHandler);
// good
$('.wrap').on('click', 'a', myHandler);
我也想和KineticJS一起做这件事,因为会有很多对象.
推荐指数
解决办法
查看次数
KineticJS - 用鼠标绘制线条
我正在使用KinectJS根据鼠标移动绘制线条.当用户按住鼠标按钮时,我希望它是该行的"开始"点,当用户释放时,它将是该行的"结束",但是当他们按住鼠标时我想要能够在鼠标移动时动态重绘线条.这可能吗？
推荐指数
解决办法
查看次数
如何测量kineticjs中的文本宽度？
是否有方法或解决方法在KineticJs中返回文本形状中字符串的文本宽度？
我需要它在画布上准确定位TextShape.
推荐指数
解决办法
查看次数
html5,从组中的对象拖放
原始问题
我想知道为什么我无法从此代码中的圆圈中获取"dragstart"消息...
拖动它时,我不能得到"圈子"的消息.我尝试了一些来自http://www.html5canvastutorials.com的工作代码.在这段代码中:http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/,它正在运行.
jsfiddle:http://jsfiddle.net/zoutepopcorn/YXJpH/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.1.2.js"></script>
<script src="setting.js"></script>
<script src="imgStyle.js"></script>
<script>
var stage;
var layer;
setupStage();
function setupStage() {
stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 800
});
layer = new Kinetic.Layer();
messageLayer = new Kinetic.Layer();
stage.add(messageLayer); …推荐指数
解决办法
查看次数
任何使Kinetic.js支持IE8的方法？
我现在处于一种情况,我需要使用一些复杂的代码来处理Kinetic.js和一个用于IE8的canvas元素.
据官方统计,Kinetic.js没有支持IE8的计划.
我尝试使用webshims lib,但Kinetic.js在以下代码上失败:
Kinetic.Canvas = function(width, height) {
this.element = document.createElement('canvas');
this.context = this.element.getContext('2d'); //<-- Error here
// set dimensions
this.element.width = width;
this.element.height = height;
};
错误是"对象不支持属性或方法'getContext'".这对我来说很有意义,因为我不希望IE8文档创建的元素画布实现canvas元素的方法,但如果<canvas>元素已经创建,webshims就会播放,你可以使用这些方法.但是,强制Kinetic.js使用一个canvas元素会破坏它的一些功能(因为它可以动态创建画布对象).
为了达到这个目的,我有哪些选择？
推荐指数
解决办法
查看次数
在KineticJS中移除舞台
如何Stage移除KineticJS ？
问题: stage.removeChildren()成功删除其子项layers.但是stage.remove()没有移除舞台,如下面的jsfiddle所示,console.log(stage)删除它后仍显示舞台尚未被删除!
.kineticjs-content与a一起创建的div Kinetic.Stage也在.remove()执行后保留.
jsfiddle: http ://jsfiddle.net/jfaUg/
推荐指数
解决办法
查看次数
canvas.toDataURL()导致安全性错误
我正在使用HTML5 canvas和KineticJS方法的.toDataURL()功能.画布使用我的用户上传到站点的图像,这些图像存储在不同的计算机和子域中. .toDataURL()farm1.domain.com
问题:当.toDataURL()被调用时,我得到的错误
SECURITY_ERR: DOM Exception 18
有没有解决的办法？如果用户通过访问页面domain.com并且托管图像,我也会遇到同样的问题www.domain.com.
尝试:
我httpd.conf在virtualhost中添加了以下行,并重新启动了apache服务.
Header add Access-Control-Allow-Origin "http://www.domain.com"
Header add Access-Control-Allow-Origin "http://domain.com"
Header add Access-Control-Allow-Origin "http://farm1.domain.com"
访问www.domain.com页面上托管的图像时,我仍然遇到同样的错误domain.com!KineticJS有没有办法解决这个问题？
推荐指数
解决办法
查看次数
将html 5画布图像保存在本地硬盘上
我使用kineticjs库在html 5 canvas上创建了形状.现在我想将画布保存为本地系统硬盘上的图像.请告诉我如何使用KineticJS库实现它.
推荐指数
解决办法
查看次数
是否可以结合kinetic.js和backbone.js？
我想编写一个简单地在屏幕上放置矩形的应用程序.但我需要将kinetic.js和backbone.js结合起来,我不确定是否可以完成.动力学代码是:
document.getElementById('rect').addEventListener('click', function() {
rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50,25],
draggable: true,
});
和骨干代码
$(function() {
var Shape = Backbone.Model.extend({
defaults: { x:50, y:50, width:150, height:150, color:'gray' },
setTopLeft: function(x,y) { this.set({ x:x, y:y }); },
setDim: function(w,h) { this.set({ width:w, height:h }); },
isCircle: function() { return !!this.get('circle'); }
});
*我添加了.html文件这些路径
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
我只想在骨干中放置动力学部分而不是默认值.可能吗？
推荐指数
解决办法
查看次数
标签 统计
kineticjs ×10
javascript ×7
html5 ×5
canvas ×4
html5-canvas ×2
jquery ×2
apache ×1
backbone.js ×1
bind ×1
text-width ×1